简介
@umijs/ui 是 UmiJS 团队开源的 React UI 组件库，包含了一系列实用的组件，例如按钮、表格、表单、选项卡等。
从 2.0 版本后，@umijs/ui 完全采用 Hooks 实现，能够更好地与函数组件配合使用，而且组件的样式设计也非常优秀。
在使用了该组件库后，你可以省去写样式、处理表格排序和筛选、场景切换等常用组件的开发时间，从而更加高效地开发。
安装
首先，你需要在项目中安装 @umijs/ui，你可以使用 npm 或 Yarn 来完成：
$ npm install @umijs/ui # 或者 $ yarn add @umijs/ui
使用
安装成功后，你只需要在自己的代码中 import 这些组件来使用。举个例子，我们需要显示一个表格：
-- -------------------- ---- ------- ------ - ----- - ---- ------------ -------- --------- - ----- ---------- - - - ----- ------- ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- -- ------ - ------ ------------------------ ------------- ------------ -------------------------------- ------------- ----------- ------------------------------- -------- -- -展开代码
这是一个非常简单的表格，包含了两列，一列是姓名，一列是年龄。数据源是一个数组，里面有三个对象。
我们可以看到，使用 @umijs/ui 的组件非常简单，只需要按照文档描述的 props 即可完成页面的搭建。
示例
下面是一些 @umijs/ui 组件的示例代码，供大家参考：
Button
import { Button } from '@umijs/ui'; function MyButton() { return <Button type="primary">Submit</Button>; }
Input
import { Input } from '@umijs/ui'; function MyInput() { return <Input placeholder="Please input something" />; }
Select
-- -------------------- ---- ------- ------ - ------ - ---- ------------ -------- ---------- - ----- ------- - - - ------ ------ ------ ----- -- - ------ -------- ------ ------- -- - ------ ------- ------ ------ -- -- ------ ------- ----------------- --- -展开代码
DatePicker
import { DatePicker } from '@umijs/ui'; function MyDatePicker() { return <DatePicker />; }
Table
-- -------------------- ---- ------- ------ - ----- - ---- ------------ -------- --------- - ----- ---------- - - - ----- ------- ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- -- ------ - ------ ------------------------ ------------- ------------ -------------------------------- ------------- ----------- ------------------------------- -------- -- -展开代码
总结
@umijs/ui 是一个非常优秀的 React UI 组件库，其采用 Hooks 技术实现，因此使用起来非常方便。
安装和使用也是非常简单的，只需要按照文档描述来传递 props 即可完成页面的渲染。
以上只是部分示例，实际上该组件库还包含了很多其它的组件，我们可以在文档中查看。有了这个库的帮助，我们可以更加高效地完成页面的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/151759
