简介
candy-wrapper 是一个基于 React 的 UI 组件库。它提供了许多常用的 UI 组件，如按钮、表单、弹出框等，还有一些高级组件，如下拉框、选项卡等。它易于使用、可定制，并且支持很好的可访问性。
安装
首先，你需要在你的项目中安装 candy-wrapper，你可以使用 npm 或者 yarn：
--- ------- -------------
或者
---- --- -------------
使用
candy-wrapper 内置了 React 的 CSS-in-JS 库 Stlled-components，你可以使用它来定制组件的样式。
首先，你需要在你的项目中导入 candy-wrapper：
------ - ------ - ---- ----------------
然后你可以使用 Button 组件：
------------- ------------
这将生成一个浏览器原生的按钮。当然，你可以使用 styled-components 来定制按钮的样式：
------ ------ ---- -------------------- ------ - ------ - ---- ---------------- ----- ------------ - --------------- ----------------- -------- ------ ----- -------------- ---- -- -- --- ------------------- ------------------
这将生成一个背景为橙色、圆角为 4px 的按钮。
API
Button
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string or React.ReactNode | 'Button' | 按钮上的文本或图标 |
| disabled | boolean | false | 按钮是否被禁用，禁用后无法点击 |
| size | 'small' or 'medium' or 'big' | 'medium' | 按钮的大小 |
| variant | 'primary' or 'secondary' | 'primary' | 按钮的样式，primary 表示主要按钮，secondary 表示次要按钮 |
| onClick? | (event: React.MouseEvent) => void | - | 按钮的点击事件 |
Modal
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string or React.ReactNode | 'Modal' | 弹窗的标题 |
| visible | boolean | false | 弹窗是否可见，可通过这个 prop 控制弹窗的显示和隐藏 |
| onCancel? | (event: React.MouseEvent) => void | - | 点击取消按钮或弹窗关闭图标时的回调函数 |
| onOk? | (event: React.MouseEvent) => void | - | 点击确定按钮时的回调函数 |
| okText? | string | '确定' | 确定按钮的文本 |
| cancelText? | string | '取消' | 取消按钮的文本 |
其他组件
candy-wrapper 还提供了许多其他组件，如 Form、Input、Select、RadioGroup 等，你可以在 npm 官网上查看文档和示例。
总结
candy-wrapper 是一个易用、可定制的 React UI 组件库，它提供了许多常用的 UI 组件，可以大大加快前端开发的速度。同时，它还支持很好的可访问性，可以帮助你开发出更加友好的网站。希望你能喜欢它！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005585381e8991b448d589d