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