@steveouyang/sto-ui-react

@安装使用

安装石头 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>
  );
}

执行效果