简介
react-mfb-mui 是一个 React 的组件库，能够方便地在项目中集成 Material Floating Button 组件。该组件库提供了多种样式可供选择，而且易于使用。
安装
使用 npm 安装 react-mfb-mui：
--- ------- ------------- ------
使用
导入组件
------ --- ---- ---------------- ------ -------------------------------------------
基本使用
----- --------------- ---------------------------- ---------------------------- --------------------- ------------ ---- -- ---------------- -------------------------- ------------------------- -- ---------------- ------------------------- ------------------------- -- ---------------- ---------------------------- ------------------------- -- ---------------- --------------------------- ------------------------- -- ---------------- ------------------------ ------------------------- -- ------
MFB 组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| effect | string | zoomin |
MFB 按钮动画效果，可选：none, slide, zoomin, zoomout, slideDown, slideUp, rotate, rotateY |
| position | string | br |
MFB 按钮所在位置，可选：br, bl, tr, tl |
| method | string | click |
子按钮打开方式，可选：click, hover, both |
| mainButtonBackgroundColor | string | red |
主按钮背景色 |
| label | string | 空 | 主按钮文本 |
| iconResting | string | ion-plus-round |
主按钮默认图标 |
| iconActive | string | ion-close-round |
主按钮激活时的图标 |
| children | node | 空 | 子按钮 |
MFB.ChildButton 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| method | string | 父组件设置的 method 属性值 |
子按钮打开方式，可选：click, hover, both |
| backgroundColor | string | 父组件设置的 mainButtonBackgroundColor 属性值 |
背景色 |
| icon | string | 空 | 图标 |
| label | string | 空 | 标签文本 |
示例代码
------ ------ - --------- - ---- --------
------ --- ---- ----------------
------ -------------------------------------------
----- --- ------- --------- -
-------- -
------ -
---- --------------- ------------- ----------------------------------
--------------- ---------------------------- ---------------------------- ------------ ---- --
---------------- -------------------------- ------------------------- ------------- --
---------------- ------------------------- ------------------------- ------------- --
---------------- ---------------------------- ------------------------- ------------- --
---------------- --------------------------- ------------------------- ------------- --
---------------- ------------------------ ------------------------- ------------- --
------
--
-
-
------ ------- ----效果如下：
总结
react-mfb-mui 是一个方便易用的 Material Floating Button 组件库，不仅提供了多种样式选择，而且易于自定义。希望这篇文章能对你了解并使用该组件库有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056bfa81e8991b448e5ae2