介绍
@aller/blink-labrador 是一款基于 React 的 UI 组件库，提供了常用的 UI 组件和函数工具，方便快捷地完成前端开发工作。
安装
在使用 @aller/blink-labrador 之前，需要先安装该 npm 包。
使用 npm 安装:
npm install @aller/blink-labrador --save
使用 yarn 安装:
yarn add @aller/blink-labrador
使用
使用该组件库需要先引入样式文件，并按需引入组件。
引入样式文件
import '@aller/blink-labrador/dist/styles.css';
按需引入组件
import { Button, Input } from '@aller/blink-labrador';
示例
展示一个简单的登录表单，包含用户名和密码输入框，以及提交按钮。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- ----- - ---- ------------------------ ------ ------------ -------- ----- - ----- ---------- ------------ - ------------- ----- ---------- ------------ - ------------- ----- ------------ - --- -- - ------------------- ------------------------ ---------- ------------------------ ---------- - ------ - ----- ---------------------- ------------------------ --------- --------- ---- ----------------------- ------ ------------------------------------ ------ ------------- ----------- ---------------- ------------- -- ---------------------------- -- ------ ---- ----------------------- ------ ------------------------------------ ------ ------------- --------------- ---------------- ------------- -- ---------------------------- -- ------ ------- ----------------------------- ------- -- - ------ ------- ----展开代码
-- -------------------- ---- ------- ----------- - ---------- ------ ------- ----- -------- ----- ------- --- ----- ----- -------------- ---- - ----------- - -------------- ----- - ----- - -------- ------ -------------- ---- -展开代码
API
@aller/blink-labrador 提供了以下组件和函数工具。
Button
<Button type="primary">Primary Button</Button>
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | string | - | 按钮类型，可选值为：primary, danger, ghost, link |
| disabled | boolean | false | 是否禁用按钮 |
| onClick | function | - | 点击按钮的回调函数 |
Input
<Input placeholder="Please input" />
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | string | text | 输入框类型，可选值为：text, password |
| value | string | - | 输入框的值 |
| placeholder | string | - | 输入框的占位符 |
| onChange | function | - | 输入框值改变的回调函数 |
Select
<Select options={[{label: 'option 1', value: 1}, {label: 'option 2', value: 2}]} />
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Array | [] | 下拉框的选项 |
| value | string | - | 当前选择的值 |
| onChange | function | - | 选择下拉框选项的回调函数 |
Table
-- -------------------- ---- ------- ----- ------- - - - ---- ------- ------ ------- ---------- ------ -- - ---- ------ ------ ------ ---------- ----- -- - ---- ---------- ------ ---------- ---------- --------- -- - ----- ---------- - - - ----- ------ ---- --- -------- ---- ----- -- - ----- -------- ---- --- -------- ---- -------- - - ------ ----------------- ----------------------- --展开代码
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| columns | Array | [] | 表格列的属性 |
| dataSource | Array | [] | 表格数据源 |
| pagination | boolean | false | 是否显示分页器 |
| pageSize | number | 10 | 每页显示数据量 |
| total | number | - | 总共的数据量 |
| onPageChange | function | - | 分页回调函数 |
Modal
-- -------------------- ---- ------- ----- -------------- ---------------- - ---------------- ----- ------------- - -- -- - --------------- ------ ---------- ----------------------- - ------ ------------ ------ ---------------------- -------------------- ------------ -- ------------------------ -------- ----------- --------展开代码
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | - | 弹窗标题 |
| visible | boolean | false | 弹窗可见性 |
| onOk | function | - | 弹窗确认回调函数 |
| onCancel | function | - | 弹窗取消回调函数 |
| confirmText | string | 'OK' | 确认按钮文本 |
| cancelText | string | 'Cancel' | 取消按钮文本 |
| closeable | boolean | true | 是否显示关闭按钮 |
| maskClosable | boolean | true | 点击遮罩层是否关闭弹窗 |
Loading
<Loading loading={true} />
属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| loading | boolean | false | 是否显示加载中 |
| tip | string | 'Loading...' | 加载中的提示语 |
| size | string | 'default' | 加载图标大小，可选值为：small, medium, large |
总结
@aller/blink-labrador 提供了常用的 UI 组件和函数工具，方便快捷地完成前端开发工作。在使用该组件库时，需要引入样式文件，并按需引入组件。可以根据需要使用属性来定制组件的样式和行为。本篇文章介绍了该组件库的使用方法和 API，希望对前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115796
