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-
6
6
7
7
## TODO
8
8
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
11
11
- [ ] Only rotate icon not whole button
12
12
- [ ] You suggest!
13
13
@@ -28,8 +28,8 @@ import {
28
28
MainButton ,
29
29
ChildButton ,
30
30
} 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 ' ;
33
33
34
34
35
35
state = {
@@ -39,27 +39,31 @@ state = {
39
39
< FloatingMenu
40
40
slideSpeed= {500 }
41
41
direction= " up"
42
+ spacing= {8 }
42
43
isOpen= {this .state .isOpen }
43
44
>
44
45
< 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" / > }
48
48
backgroundColor= " black"
49
- size= {56 }
50
49
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' )}
51
57
/ >
52
58
< ChildButton
53
- iconButton= {MdAdd}
54
- iconColor= " black"
59
+ icon= {< MdFavorite style= {{ fontSize: 20 }} nativeColor= " black" / > }
55
60
backgroundColor= " white"
56
- size= {56 }
61
+ size= {40 }
57
62
/ >
58
63
< ChildButton
59
- iconButton= {MdAdd}
60
- iconColor= " black"
64
+ icon= {< MdFavorite style= {{ fontSize: 20 }} nativeColor= " black" / > }
61
65
backgroundColor= " white"
62
- size= {56 }
66
+ size= {40 }
63
67
/ >
64
68
< / FloatingMenu>
65
69
...
You can’t perform that action at this time.
0 commit comments