Browse Source

Document fab icon tinting

Guy Carmeli 7 years ago
parent
commit
f98506a0ed
1 changed files with 6 additions and 0 deletions
  1. 6
    0
      docs/adding-buttons-to-the-navigator.md

+ 6
- 0
docs/adding-buttons-to-the-navigator.md View File

136
 Each screen can contain a single Fab which is displayed at the bottom right corner of the screen.
136
 Each screen can contain a single Fab which is displayed at the bottom right corner of the screen.
137
 
137
 
138
 * Simple Fab:
138
 * Simple Fab:
139
+
139
 ```js
140
 ```js
140
   static navigatorButtons = {
141
   static navigatorButtons = {
141
     fab: {
142
     fab: {
142
       collapsedId: 'share',
143
       collapsedId: 'share',
143
       collapsedIcon: require('../../img/ic_share.png'),
144
       collapsedIcon: require('../../img/ic_share.png'),
145
+      collapsedIconColor: 'red', // optional
144
       backgroundColor: '#607D8B'
146
       backgroundColor: '#607D8B'
145
     }
147
     }
146
   };
148
   };
148
 
150
 
149
 * Fab with expanded state
151
 * Fab with expanded state
150
 [Example](https://material-design.storage.googleapis.com/publish/material_v_9/0B8v7jImPsDi-ZmQ0UnFPZmtiSU0/components-buttons-fab-transition_speeddial_02.mp4)
152
 [Example](https://material-design.storage.googleapis.com/publish/material_v_9/0B8v7jImPsDi-ZmQ0UnFPZmtiSU0/components-buttons-fab-transition_speeddial_02.mp4)
153
+
151
 ```js
154
 ```js
152
     fab: {
155
     fab: {
153
       collapsedId: 'share',
156
       collapsedId: 'share',
154
       collapsedIcon: require('../../img/ic_share.png'),
157
       collapsedIcon: require('../../img/ic_share.png'),
158
+      collapsedIconColor: 'green', // optional
155
       expendedId: 'clear',
159
       expendedId: 'clear',
156
       expendedIcon: require('../../img/ic_clear.png'),
160
       expendedIcon: require('../../img/ic_clear.png'),
161
+      expendedIconColor: 'red', // optional
157
       backgroundColor: '#3F51B5',
162
       backgroundColor: '#3F51B5',
158
       actions: [
163
       actions: [
159
         {
164
         {
160
           id: 'mail',
165
           id: 'mail',
161
           icon: require('../../img/ic_mail.png'),
166
           icon: require('../../img/ic_mail.png'),
167
+          iconColor: 'blue', // optional
162
           backgroundColor: '#03A9F4'
168
           backgroundColor: '#03A9F4'
163
         },
169
         },
164
         {
170
         {