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

npm 包 drake-ui 使用教程

介绍

drake-ui 是一个基于 React 的 UI 组件库。使用了 drake-ui 可以极大的方便前端开发人员的工作。这个组件库提供了许多实用的组件，让你能够快速构建现代化的 web 应用程序。

安装

在使用之前，您需要将 drake-ui 安装在您的项目之中，您可以通过 npm 或者 yarn 来安装此库。

npm

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

yarn

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

使用

引入组件

你可以引入库里的所有组件来使用，也可以单独引入部分组件。我们分别以全量引入和单独引入来示范一下。

全量引入，将库里的所有组件引入进项目之中：

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

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

单独引入，只将需要使用的组件引入进项目之中：

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

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

使用示例

现在，我们来看一下如何使用 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