HiUI React 中后台组件库快速上手：从安装到搞定表格、表单和主题定制

HiUI React 中后台组件库快速上手从安装到搞定表格、表单和主题定制【免费下载链接】hiuiHIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.项目地址: https://gitcode.com/gh_mirrors/hi/hiui做中后台页面表格、表单、弹窗、分页几乎每个页面都要写一遍设计稿还经常对不齐。HiUI 是一套面向中后台系统的 React 前端组件库与设计规范内置 70 开箱即用的组件和 20 个 hooks装完就能渲染不用自己写分页状态和校验逻辑。30 秒看懂 HiUI 是干什么的HiUI 来自真实的中后台业务场景它要解决一件事多个页面、多人协作时如何保持同一套交互和视觉标准。具体有四块能力值得了解设计标准化按钮状态、表格布局、表单 label 位置都遵循同一套视觉与交互规范换人维护页面样式不会跑偏单组件分离设计每个组件是独立的 npm 包数据结构与组件本身分离API 变化容易跟进升级成本低场景覆盖广70 组件覆盖数据展示表格、树、列表、表单交互日期选择、级联、多选、反馈通知弹窗、提示、通知三大块常见中后台场景基本够用按需加载只引入用到的组件构建产物不会被无关代码撑大安装 HiUI 并渲染第一个表格全量安装一行命令建议 Node 14仓库的 volta 锁定在 14.21.3npm install hi-ui/core hi-ui/hiui只用到几个组件的话按组件名单独装名字全小写、中横线连接比如npm install hi-ui/table。然后写一个最小页面——一个带列、带分页的表格import { Table } from hi-ui/hiui const columns [ { title: 姓名, dataKey: name }, { title: 部门, dataKey: dept }, ] const data [ { key: 1, name: 张三, dept: 研发部 }, { key: 2, name: 李四, dept: 运营部 }, ] export default function App() { return ( Table columns{columns} data{data} pagination{{ pageSize: 10 }} / ) }有两个细节建议提前知道data每行要带key缺失时组件不会替你生成后续渲染会出各种怪问题做列冻结时每一列必须指定width。这两点官方文档里都专门标了红。日常最高频的 3 个场景业务表格排序、列冻结、控制面板一把配好业务表格最累的不是画格子而是围绕表格的周边冻结、排序、隐藏列、合计。HiUI 表格把这些都收敛成配置项加一个standard就开启整套标准能力——表头吸顶、斑马纹、列操作菜单、控制面板Table standard fixedToColumn{{ left: name }} columns{columns} data{data} /需要排序就在列配置里加sorter需要合计、平均值就加total和avg。表格组件源码packages/ui/table/表单声明式校验提交回调直接给值表单不需要强制接入状态管理器直接声明式写校验规则沿用 async-validator 的格式提交回调同时拿到值和错误Form initialValues{{ name: }} rules{{ name: [{ required: true, message: 请输入名称 }] }} Form.Item fieldname label名称 required Input / /Form.Item Form.Submit onClick{(values) console.log(values)}提交/Form.Submit /Form动态行有Form.List想整张表单由数据驱动就用SchemaForm按 schema 渲染。表单组件源码packages/ui/form/树形数据点击展开才加载下一级组织架构、地域选择这类树数据不必一次拉全。onLoadChildren在点击展开时请求下一级返回数据里的isLeaf字段控制左侧展开按钮是否显示Table columns{columns} data{topData} onLoadChildren{(row) fetchChildren(row)} /进阶两个最常被问到的问题覆盖 SCSS 变量做品牌主题HiUI 的样式用 SCSS 编写拆成了独立的样式包 packages/core/core-css/。做品牌定制时在构建配置的 SCSS additionalData 里覆盖主色、基础字号这类设计变量即可不用改源码只想调单个组件时用className注入样式就够了不必 fork 组件库。内置图标集的使用与扩展图标库 packages/icons/ 自带 400 个 SVG 图标组件按 alert、common、data、direction、edit、file 分类通过 SvgIcon 组件引入。组件由 SVG 资源自动生成往对应分类目录放好文件跑一下图标生成脚本仓库脚本auto-generate过滤hi-ui/icons就能产出新的图标组件接自定义图标库同理。资源与下一步源码仓库git clone https://gitcode.com/gh_mirrors/hi/hiui贡献指南CONTRIBUTING.mdCLI 工具scripts/hiui-cli/用于管理组件包的版本与脚手架想立刻看到效果克隆后依次执行yarn install、yarn bootstrap再跑yarn storybook浏览器打开 6006 端口70 组件的每个 demo 都能直接交互。建议先玩表格和表单两组 demo看完基本就能判断它是否适合你的项目。【免费下载链接】hiuiHIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.项目地址: https://gitcode.com/gh_mirrors/hi/hiui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考