customer-component
v1.0.5
Published
一个狠好使的React+TS组件库! / a React+TS based highly popular management component ui lib!
Downloads
1
Maintainers
Readme
@安装使用
安装石头 UI
# 没有安装nrm源管理工具时...
npm i -g nrm
# NPM全局切换到官方源
nrm use npm
# 安装石头UI/React
npm i @steveouyang/sto-ui-react
使用石头弹窗
import React, { useState } from "react";
// 引入石头弹窗
import { StoPopup } from "@steveouyang/sto-ui-react";
export default function PopupDemo() {
// 用一个state控制要不要显示弹窗
const [showPopup, setShowPopup] = useState(false);
return (
<div>
<h3>PopupDemo</h3>
<button onClick={() => setShowPopup(true)}>显示弹窗</button>
{/* 需要时显示弹窗显示弹窗 */}
{showPopup && (
// closer={setShowPopup} 告诉组件哪个state在控制弹窗的显隐 它好在必要时帮你关闭弹窗
// title="我的弹窗" 弹窗标题
// onConfirm={() => console.log("已确定")} 点击确定时的回调
// <p>This is a modal content</p> 自定义弹窗内容
<StoPopup
closer={setShowPopup}
title="我的弹窗"
onConfirm={() => console.log("已确定")}
>
<p>This is a modal content</p>
</StoPopup>
)}
</div>
);
}
执行效果
使用石头表格
import React from "react";
// 引入石头超级表格
import { StoTableX } from "@steveouyang/sto-ui-react";
/* 造一堆测试数据 */
import { getStudents } from "../common/mockdata";
const students = getStudents(20, true);
/* 格式化数据字段 */
const formatters = {
// 用一个a标签去显示学生姓名
name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,
// 用a标签嵌套img显示学生头像
avatar: (key: string, item: any) => (
<a href={`/${item.id}`}>
<img style={{ width: 40 }} src={`${item[key]}`} alt="" />
</a>
),
};
/* 数据多选发生变化时回调 */
const onSelectedItemsChanged = (items: Set<Record<string, any>>) => {
console.log("onSelectedItemsChanged", items);
};
/* 组合组件:自带筛选器和分页器的超级表格 */
export default function TableXDemo() {
return (
<div>
TableXDemo
{/*
data={students} 表格数据
width={800} 设置表格宽度
formatters={formatters} 字段的具体显示方式
sortables={["name","age","score"]} 哪些字段支持排序
pageSize={10} 一页显示多少条数据
onSelectedItemsChanged={onSelectedItemsChanged} 多选发生变化时回调
*/}
<StoTableX
data={students}
// width={800}
formatters={formatters}
sortables={["name", "age", "score"]}
pageSize={10}
onSelectedItemsChanged={onSelectedItemsChanged}
></StoTableX>
</div>
);
}
执行效果