一个react的折叠按钮
https://hst-sunday.github.io/react-motion-menu-button/
npm install
npm start
打开 http://localhost:3001
npm i react-motion-menu-button --save
import reactMotionMenuButton from 'react-motion-menu-button';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
open: false,
}
this.toggle = this.toggle.bind(this);
}
toggle(event) {
event.preventDefault()
this.setState({
open: !this.state.open
})
}
render() {
return (<div>
<reactMotionMenuButton
mode={this.state.value}
childrenButtonData={
[
{ imgSrc: messagePNG, onClick: (e) => message.info('i am message'), imgAlt: "1", bgColor: "#eee" },
{ imgSrc: cameraPNG, onClick: (e) => message.info('i am camera'), imgAlt: "2", bgColor: "#eee" },
{ imgSrc: photoPNG, onClick: (e) => message.info('i am photo'), imgAlt: "3", bgColor: "#eee" },
{ imgSrc: opinionPNG, onClick: (e) => message.info('i am opinion'), imgAlt: "4", bgColor: "#eee" },
{ imgSrc: shoppingPNG, onClick: (e) => message.info('i am shopping'), imgAlt: "5", bgColor: "#eee" },
]
}
buttonSize={60}
backgroundColor={"#eee"}
isOpen={this.state.open}
onClick={(e) => this.toggle(e)}
/>
</div>)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
选项 | 描述 | 类型 | 默认值 |
---|---|---|---|
mode | 子按钮飞出模式:sur left right up down LT RT 7种模式 |
String | sur |
isOpen | 按钮是否打开 | Bool | false |
buttonSize | 主按钮的大小px |
Number | 60 |
backgroundColor | 主按钮的背景颜色 | color | #eee |
left | 按钮距离左边的位置px |
Number | 155 |
top | 按钮距离顶部的位置px |
Number | 450 |
mainButtonImgSrc | 主按钮的图片 | img.src | 内置home图片 |
closeImgSrc | 主按钮打开时的图片 | img.src | 内置一张打叉的图片 |
ChildButtonToMainButtonSpacingDistance | 子按钮到主按钮的两圆心距离 | Number | 80 |
SeparationAngle | 仅在sur 模式下生效,两个子按钮的形成的夹角角度 |
Number | 40 |
childrenButtonData | 显示子按钮的数据,格式为[{ imgSrc: messagePNG, onClick: (e) => message.info('i am message'), imgAlt: "1", bgColor: "#eee" }, ...] ,其中imgSrc 为子按钮的图片、 onClick 为点击该按钮的方法, imgAlt 为元素img 的属性alt 可不填, bgColor 为子按钮的背景颜色 |
Array | [] |
A gentle introduction to React Motion
MIT