介绍
drake-ui 是一个基于 React 的 UI 组件库。使用了 drake-ui 可以极大的方便前端开发人员的工作。这个组件库提供了许多实用的组件，让你能够快速构建现代化的 web 应用程序。
安装
在使用之前，您需要将 drake-ui 安装在您的项目之中，您可以通过 npm 或者 yarn 来安装此库。
npm
npm install drake-ui --save
yarn
yarn add drake-ui
使用
引入组件
你可以引入库里的所有组件来使用，也可以单独引入部分组件。我们分别以全量引入和单独引入来示范一下。
全量引入，将库里的所有组件引入进项目之中：
-- -------------------- ---- -------
------ ------- ---- -----------
------ ----------------------
-------- ----- -
------ -
---- ----------------
--------------------- --------------------
------
--
-单独引入，只将需要使用的组件引入进项目之中：
-- -------------------- ---- -------
------ - ------ - ---- -----------
------ ----------------------
-------- ----- -
------ -
---- ----------------
------------- ------------
------
--
-使用示例
现在，我们来看一下如何使用 drake-ui 的 Button 组件。
-- -------------------- ---- -------
------ - ------ - ---- -----------
------ ----------------------
-------- ----- -
------ -
---- ----------------
-------
------------ ----
---------------
----------- -- ---------------- -----------
--
------
--
-以上代码就可以出现一个样式为主要按钮颜色的按钮，点击时将在控制台打印出一句话。
属性
每一个组件都有其独特的 props，这里我们以 Button 组件为例来看一下其可用的属性：
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 按钮显示的文字 | string | 'Button' |
| disabled | 按钮是否被禁用 | bool | false |
| color | 按钮的颜色 | 'primary'/'secondary'/'danger' | 'secondary' |
| size | 按钮的尺寸 | 'small'/'medium'/'large' | 'medium' |
| onClick | 按钮被点击时所触发的事件 | function(event) | 无 |
| className | 按钮的 class 属性，方便自定义样式 | string | 无 |
| style | 按钮的内联样式，方便自定义样式 | object | {} |
总结
以上就是关于 drake-ui 的使用教程，如果你想了解更多细节，请查阅官方文档。现在，您已经可以使用 drake-ui 在您的项目之中构建最酷炫的组件了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfe03