介绍
hmda-ui 是一款基于 React 的 UI 组件库，为开发者提供了丰富、易用、美观的前端组件。简单易用，同时提供了高度可定制化的能力。
安装
hmda-ui 可以通过 npm 安装：
--- ------- ------- ------
使用
hmda-ui 提供了各式各样的组件，可以直接在 React 项目中使用。下面以 Button 组件为例：
------ ----- ---- --------
------ - ------ - ---- ----------
-------- ----- -
------ -
-----
--------------------
------
--
-
------ ------- ----API
Button
按钮组件，支持多种样式和事件绑定。
--------------------
Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | string | 'default' | 按钮类型，可选值：'default', 'primary', 'danger', 'link', 'ghost' |
| size | string | 'default' | 按钮大小，可选值：'small', 'default', 'large' |
| disabled | boolean | false | 是否禁用 |
| loading | boolean | false | 是否显示加载中 |
| onClick | (event: React.MouseEvent) => void | - | 点击事件 |
| href | string | - | 链接地址 |
| target | string | '_self' | 链接跳转的目标窗口，可选值：'_self', '_blank' |
| rel | string | '' | 与使用 target="_blank" 时配合使用 |
| className | string | '' | 样式类名 |
| style | object | {} | 样式 |
Input
输入框组件。
------ ------------------- --
Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | string | 'text' | 输入框类型 |
| placeholder | string | - | 占位提示文本 |
| defaultValue | string | - | 默认值 |
| value | string | - | 值 |
| onChange | (value: string) => void | - | 改变事件 |
| onFocus | () => void | - | 聚焦事件 |
| onBlur | () => void | - | 失焦事件 |
Select
下拉选择框组件。
-------
----------
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ ------- ------ ---- --
--
--------------- -- -------------------
--Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Array<{ value: string, label: string }> | [] | 选项列表 |
| value | string | - | 值 |
| defaultValue | string | - | 默认值 |
| onChange | (value: string) => void | - | 改变事件 |
| placeholder | string | - | 占位文字 |
| disabled | boolean | false | 是否禁用 |
| isLoading | boolean | false | 是否加载中 |
Table
表格组件。
------
-------------
- ----- ----- ---- --- -------- ---- --
- ----- ----- ---- --- -------- ---- --
--
----------
- ------ ----- ---------- ------ --
- ------ ----- ---------- ----- --
- ------ ----- ---------- --------- --
--
--Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| dataSource | Array<{ [key: string]: string | JSX.Element }> | [] | 数据源 |
| columns | Array<{ title: string, dataIndex: string }> | [] | 表格列配置 |
| rowKey | string | ((record: T) => string) | 'key' | 表格行的 key 的取值，可以是字符串，也可以是一个函数，函数的参数是当前行的数据。 |
结束语
以上仅仅是 hmda-ui 组件库的一部分，更多组件的使用方法可以查看官方文档。hmda-ui 提供了丰富、灵活和易用的组件，使用后可以大大提升开发效率，让 UI 更美观，更易用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f72238a385564ab6832