前端开发人员在开发中会用到很多第三方的开源代码库和工具，其中 npm 是前端最常用的包管理器。@modernpoacher/design-system 是一个基于 React 的 UI 组件库，它包含了丰富的 UI 元素和功能，可以帮助开发人员快速构建优质的界面。
本文将介绍如何使用 @modernpoacher/design-system 库，并给出一些使用示例，希望能够帮助读者快速上手该库。
安装
使用 npm 可以非常容易地安装 @modernpoacher/design-system 库，只需在终端输入以下命令：
npm install @modernpoacher/design-system
引入使用
安装成功后，在 React 项目中引入组件即可使用。以 Button 组件为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------------------------
-------- ----- -
------ -
-----
------- ------------ ------------------
--
---------
------
--
-
------ ------- ----API
@modernpoacher/design-system 提供了很多组件，每个组件都有不同的 API 属性，以下是 Button 组件的 API 属性：
Button
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| size | "small"/"large" | "large" | 按钮大小 |
| variant | "primary"/"secondary" | "primary" | 按钮样式 |
| disabled | boolean | false | 是否禁用按钮 |
| onClick | function | 点击按钮后执行的回调函数 |
Input
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| label | string | 输入框标签 | |
| type | "text"/"number" | "text" | 输入框类型 |
| placeholder | string | 输入框提示文本 | |
| value | string/number | 输入框的值 | |
| onChange | function | 输入框值改变时执行的回调函数 |
更多组件的 API 说明请参考官方文档：https://modernpoacher.github.io/design-system/
使用示例
Button
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------------------------
-------- ----- -
----- ----------- - -- -- -
------------------ ---------
--
------ -
-----
------- ------------ ----------------- ----------------------
--
---------
------- ------------ ------------------- ---------
--
---------
------
--
-
------ ------- ----Input
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -------------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - ------- -- -
-----------------------------
--
------ -
-----
------
----------------
-----------
-------------
--------------------
-----------------------
--
------
----------------
---------------
-------------
-------------------
-----------------------
--
------
--
-
------ ------- ----总结
@modernpoacher/design-system 是一个非常棒的 React UI 库，可以帮助开发人员构建优秀的界面，同时也提高了开发效率。本文对该库的安装、引入及 API 进行了详细介绍，并给出了一些使用示例，希望能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2142c7403f2923b035c695