HiUI 组件库快速上手从安装到搭出第一个中后台界面【免费下载链接】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/hiuiHiUI 是一个基于 React 的中后台系统前端组件库当前版本已到 5.0面向搭建管理控制台、运营平台、数据看板类应用的开发者。中后台页面里重复度最高的几类工作——列表管理、表单录入、检索过滤、结果反馈——HiUI 都封装成了标准化组件把数据结构与交互细节处理好开发者只关注业务逻辑。痛点与解法它实际解决了什么问题 长列表页面功能越叠越多中后台的列表页出现频率最高列一多就会接连遇到排序、筛选、冻结列、表头吸顶这些需求。自己手写表格往往一半时间花在细节上还容易踩到冻结列宽度漂移这类坑。HiUI 的 Table 把这些能力都内置好了分页、排序、吸顶、冻结、斑马纹都通过属性开关控制一行standard即可启用整套标准配置源码与完整 API 见 packages/ui/table/。表单录入校验逻辑散落各处表单页面容易出现状态与校验逻辑散在多个组件里、联动一改就顾此失彼的情况。HiUI 的 Form 用rules集中定义校验规则Form.Item只负责声明字段名与标签提交时由validate统一给出结果表单结构如果由后端动态下发还可以直接交给 SchemaForm把字段写成 schema 整体渲染入口见 packages/ui/form/。多人协作视觉与文案不统一同一系统里多人开发时按钮状态、表格样式、空态文案很容易各写各的。HiUI 内置了统一的交互与视觉规范并配合 locale-context 国际化包统一管理中英文案单人项目与多人协作都能保持界面口径一致。最小上手路径从安装到渲染第一屏 ⚡准备 Node 14 与 npm 或 yarn。推荐按需安装只装实际用到的组件组件名全小写、中横线连接npm install hi-ui/core hi-ui/table引入后十几行代码就能搭出一张带分页的表格import { Table } from hi-ui/table Table columns{columns} // [{ title, dataKey, width }] data{rows} // 数据行 pagination{{ pageSize: 10 }} /想直观浏览全部组件的效果与交互clone 源码仓库跑 Storybook 最直接git clone https://gitcode.com/gh_mirrors/hi/hiui cd hiui yarn yarn storybook实战亮点让列表页更专业的三个关键配置冻结列与表头吸顶。列超出屏幕时给冻结列设置fixedToColumn注意冻结列必须传width再配maxHeight内容超出后自动出现滚动、表头保持固定冻结列跟随不错位Table columns{columns} data{rows} fixedToColumnname // 从左侧冻结到 name 列 maxHeight{520} sticky /标准模式。内部管理系统没有特殊视觉要求时加上standard一个属性列操作菜单、吸顶、边框、控制面板、斑马纹会一起开启一张规范的数据表格立刻成形。异步数据源。数据来自后端时可以把请求配置交给 Table 的dataSource属性组件负责请求与分页参数transformResponse处理返回结构转换不用自己维护 loading 与翻页状态。定制与资源 主题定制主要走 SCSS 变量覆盖core-css 统一维护全局变量改一处主色或字号即可全局生效单个组件的微调用className注入样式即可。全部组件按包拆分、共 80 余个可浏览 packages/ui/ 按需取用hooks 与工具函数分别位于 packages/hooks/ 与 packages/utils/。贡献流程参考仓库内的 CONTRIBUTING.md问题反馈与需求建议直接提交源码仓库的 Issues。【免费下载链接】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），仅供参考
HiUI 组件库快速上手：从安装到搭出第一个中后台界面
HiUI 组件库快速上手从安装到搭出第一个中后台界面【免费下载链接】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/hiuiHiUI 是一个基于 React 的中后台系统前端组件库当前版本已到 5.0面向搭建管理控制台、运营平台、数据看板类应用的开发者。中后台页面里重复度最高的几类工作——列表管理、表单录入、检索过滤、结果反馈——HiUI 都封装成了标准化组件把数据结构与交互细节处理好开发者只关注业务逻辑。痛点与解法它实际解决了什么问题 长列表页面功能越叠越多中后台的列表页出现频率最高列一多就会接连遇到排序、筛选、冻结列、表头吸顶这些需求。自己手写表格往往一半时间花在细节上还容易踩到冻结列宽度漂移这类坑。HiUI 的 Table 把这些能力都内置好了分页、排序、吸顶、冻结、斑马纹都通过属性开关控制一行standard即可启用整套标准配置源码与完整 API 见 packages/ui/table/。表单录入校验逻辑散落各处表单页面容易出现状态与校验逻辑散在多个组件里、联动一改就顾此失彼的情况。HiUI 的 Form 用rules集中定义校验规则Form.Item只负责声明字段名与标签提交时由validate统一给出结果表单结构如果由后端动态下发还可以直接交给 SchemaForm把字段写成 schema 整体渲染入口见 packages/ui/form/。多人协作视觉与文案不统一同一系统里多人开发时按钮状态、表格样式、空态文案很容易各写各的。HiUI 内置了统一的交互与视觉规范并配合 locale-context 国际化包统一管理中英文案单人项目与多人协作都能保持界面口径一致。最小上手路径从安装到渲染第一屏 ⚡准备 Node 14 与 npm 或 yarn。推荐按需安装只装实际用到的组件组件名全小写、中横线连接npm install hi-ui/core hi-ui/table引入后十几行代码就能搭出一张带分页的表格import { Table } from hi-ui/table Table columns{columns} // [{ title, dataKey, width }] data{rows} // 数据行 pagination{{ pageSize: 10 }} /想直观浏览全部组件的效果与交互clone 源码仓库跑 Storybook 最直接git clone https://gitcode.com/gh_mirrors/hi/hiui cd hiui yarn yarn storybook实战亮点让列表页更专业的三个关键配置冻结列与表头吸顶。列超出屏幕时给冻结列设置fixedToColumn注意冻结列必须传width再配maxHeight内容超出后自动出现滚动、表头保持固定冻结列跟随不错位Table columns{columns} data{rows} fixedToColumnname // 从左侧冻结到 name 列 maxHeight{520} sticky /标准模式。内部管理系统没有特殊视觉要求时加上standard一个属性列操作菜单、吸顶、边框、控制面板、斑马纹会一起开启一张规范的数据表格立刻成形。异步数据源。数据来自后端时可以把请求配置交给 Table 的dataSource属性组件负责请求与分页参数transformResponse处理返回结构转换不用自己维护 loading 与翻页状态。定制与资源 主题定制主要走 SCSS 变量覆盖core-css 统一维护全局变量改一处主色或字号即可全局生效单个组件的微调用className注入样式即可。全部组件按包拆分、共 80 余个可浏览 packages/ui/ 按需取用hooks 与工具函数分别位于 packages/hooks/ 与 packages/utils/。贡献流程参考仓库内的 CONTRIBUTING.md问题反馈与需求建议直接提交源码仓库的 Issues。【免费下载链接】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），仅供参考