简介
Diamorphosis 是一个基于 React 的 UI 框架，支持移动和 PC 端，采用 Material Design 风格，提供了丰富的组件和样式。
安装
使用 npm 进行安装：
npm install diamorphosis --save
使用
在项目中引入 diamorphosis：
import { Button, Input } from 'diamorphosis';在组件中使用 diamorphosis 提供的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------
-------- ------------- -
------ -
------- ----------- -- ------------------------------ -----------
--
-
------ ------- ------------组件
Button
按钮组件。支持以下 props：
onClick：点击事件回调函数disabled：是否禁用按钮variant：按钮类型，默认为 'contained'color：按钮颜色，默认为 'primary'size：按钮大小，默认为 'medium'
-- -------------------- ---- ------- ------- ----------- -- ------------------------ ---------------- ------------------- --------------- ------------- - ----- -- ---------
Input
输入框组件。支持以下 props：
onChange：输入框内容变更事件回调函数disabled：是否禁用输入框error：是否显示错误状态placeholder：输入框占位符size：输入框大小，默认为 'medium'
<Input
onChange={(e) => console.log('changed!', e.target.value)}
disabled={false}
error={false}
placeholder='Enter something'
size='medium'
/>Checkbox
复选框组件。支持以下 props：
checked：是否选中onChange：复选框状态变更事件回调函数
<Checkbox
checked={false}
onChange={(e) => console.log('checked!', e.target.checked)}
/>Radio
单选框组件。支持以下 props：
checked：是否选中onChange：单选框状态变更事件回调函数
<Radio
checked={false}
onChange={(e) => console.log('checked!', e.target.checked)}
/>Select
下拉框组件。支持以下 props：
onChange：选中选项事件回调函数disabled：是否禁用下拉框value：选中值options：选项数据数组
-- -------------------- ---- -------
-------
------------- -- ------------------------ ----------------
----------------
--------
----------
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
--
--Drawer
抽屉组件。支持以下 props：
open：是否展开onClose：关闭事件回调函数children：抽屉内容
<Drawer open={false} onClose={() => console.log('closed!')}>
<div>Content</div>
</Drawer>Modal
模态框组件。支持以下 props：
open：是否展示onClose：关闭事件回调函数title：标题children：模态框内容
<Modal open={false} onClose={() => console.log('closed!')} title='Title'>
<div>Content</div>
</Modal>总结
上面是 diamorphosis 的使用教程，希望能对前端开发者有所帮助。Diamorphosis 提供了丰富的组件和样式，并且易于使用和定制。如果您有任何问题或建议，请随时联系 diamorphosis 的开发团队。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c5c