npm 包 hmda-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

hmda-ui 是一款基于 React 的 UI 组件库，为开发者提供了丰富、易用、美观的前端组件。简单易用，同时提供了高度可定制化的能力。

安装

hmda-ui 可以通过 npm 安装：

npm install hmda-ui --save

使用

hmda-ui 提供了各式各样的组件，可以直接在 React 项目中使用。下面以 Button 组件为例：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------

-------- ----- -
  ------ -
    -----
      --------------------
    ------
  --
-

------ ------- ----

API

Button

按钮组件，支持多种样式和事件绑定。

<Button>点击我</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<htmlbuttonelement>) => void	-	点击事件
href	string	-	链接地址
target	string	'_self'	链接跳转的目标窗口，可选值：'_self', '_blank'
rel	string	''	与使用 target="_blank" 时配合使用
className	string	''	样式类名
style	object	{}	样式

Input

输入框组件。

<Input placeholder="请输入内容" />

Props

属性名	类型	默认值	描述
type	string	'text'	输入框类型
placeholder	string	-	占位提示文本
defaultValue	string	-	默认值
value	string	-	值
onChange	(value: string) => void	-	改变事件
onFocus	() => void	-	聚焦事件
onBlur	() => void	-	失焦事件

Select

下拉选择框组件。

<Select
  options={[
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'pear', label: '梨子' },
  ]}
  onChange={value => console.log(value)}
/>

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