简介
react-mfb-mui 是一个 React 的组件库，能够方便地在项目中集成 Material Floating Button 组件。该组件库提供了多种样式可供选择，而且易于使用。
安装
使用 npm 安装 react-mfb-mui：
npm install react-mfb-mui --save
使用
导入组件
import MFB from 'react-mfb-mui'; import 'react-mfb-mui/dist/react-mfb-mui.min.css';
基本使用
<MFB> <MFB.MainButton iconResting="ion-plus-round" iconActive="ion-close-round" backgroundColor="red" label="Click me!" /> <MFB.ChildButton icon="ion-social-facebook" backgroundColor="#3b5998" /> <MFB.ChildButton icon="ion-social-twitter" backgroundColor="#55acee" /> <MFB.ChildButton icon="ion-social-googleplus" backgroundColor="#dd4b39" /> <MFB.ChildButton icon="ion-social-pinterest" backgroundColor="#cb2027" /> <MFB.ChildButton icon="ion-social-github" backgroundColor="#000000" /> </MFB>
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