File tree Expand file tree Collapse file tree 1 file changed +18
-14
lines changed Expand file tree Collapse file tree 1 file changed +18
-14
lines changed Original file line number Diff line number Diff line change @@ -6,8 +6,8 @@ Inspired by [react-material-floating-button](https://github.com/nobitagit/react-
66
77## TODO
88
9- - [ ] Add sliding trasition (WIP)
10- - [ ] Remove pointer cursor when ChildButton is not visible
9+ - [x ] Add sliding trasition (WIP)
10+ - [x ] Remove pointer cursor when ChildButton is not visible
1111- [ ] Only rotate icon not whole button
1212- [ ] You suggest!
1313
@@ -28,8 +28,8 @@ import {
2828 MainButton ,
2929 ChildButton ,
3030} from ' react-floating-button-menu' ;
31- import MdAdd from ' react-icons/lib/md /add' ;
32- import MdClose from ' react- icons/lib/md/close ' ;
31+ import MdAdd from ' @material-ui/icons /add' ;
32+ import MdClose from ' @material-ui/ icons/clear ' ;
3333
3434
3535state = {
@@ -39,27 +39,31 @@ state = {
3939 < FloatingMenu
4040 slideSpeed= {500 }
4141 direction= " up"
42+ spacing= {8 }
4243 isOpen= {this .state .isOpen }
4344 >
4445 < MainButton
45- iconResting= {MdAdd}
46- iconActive= {MdClose}
47- iconColor= " white"
46+ iconResting= {< MdAdd style= {{ fontSize: 20 }} nativeColor= " white" / > }
47+ iconActive= {< MdClose style= {{ fontSize: 20 }} nativeColor= " white" / > }
4848 backgroundColor= " black"
49- size= {56 }
5049 onClick= {() => this .setState ({ isOpen: ! this .state .isOpen })}
50+ size= {56 }
51+ / >
52+ < ChildButton
53+ icon= {< MdFavorite style= {{ fontSize: 20 }} nativeColor= " black" / > }
54+ backgroundColor= " white"
55+ size= {40 }
56+ onClick= {() => console .log (' First button clicked' )}
5157 / >
5258 < ChildButton
53- iconButton= {MdAdd}
54- iconColor= " black"
59+ icon= {< MdFavorite style= {{ fontSize: 20 }} nativeColor= " black" / > }
5560 backgroundColor= " white"
56- size= {56 }
61+ size= {40 }
5762 / >
5863 < ChildButton
59- iconButton= {MdAdd}
60- iconColor= " black"
64+ icon= {< MdFavorite style= {{ fontSize: 20 }} nativeColor= " black" / > }
6165 backgroundColor= " white"
62- size= {56 }
66+ size= {40 }
6367 / >
6468 < / FloatingMenu>
6569...
You can’t perform that action at this time.
0 commit comments