@@ -17,7 +17,7 @@ Demo: https://trendmicro-frontend.github.io/react-buttons
17172 . At this point you can import ` @trendmicro/react-buttons ` and its styles in your application as follows:
1818
1919 ``` js
20- import { Button , ButtonGroup , ButtonToolbar , ButtonDropdown } from ' @trendmicro/react-buttons' ;
20+ import { Button , ButtonGroup , ButtonToolbar } from ' @trendmicro/react-buttons' ;
2121
2222 // Be sure to include styles at some point, probably during your bootstraping
2323 import ' @trendmicro/react-buttons/dist/react-buttons.css' ;
@@ -184,106 +184,6 @@ Demo: https://trendmicro-frontend.github.io/react-buttons
184184< / Button>
185185```
186186
187- ### Dropdown Buttons
188-
189- #### Single
190-
191- ``` js
192- < Button
193- dropdown
194- placeholder= " Select..."
195- options= {[
196- { label: ' Action' , value: ' v1' },
197- { label: ' Another action' , value: ' v2' },
198- { label: ' Something else here' , value: ' v3' }
199- ]}
200- onChange= {(selectedOption ) => {
201- if (selectedOption) {
202- console .log (' label =' + selectedOption .label + ' , value = ' + selectedOption .value );
203- }
204- }}
205- / >
206- ```
207-
208- #### Split
209-
210- ``` js
211- < Button
212- dropdown
213- dropdownStyle= " split"
214- placeholder= " Select..."
215- options= {[
216- { label: ' Action' , value: ' v1' },
217- { label: ' Another action' , value: ' v2' },
218- { label: ' Something else here' , value: ' v3' }
219- ]}
220- / >
221- ```
222-
223- #### Fixed width
224- ``` js
225- < Button
226- dropdown
227- placeholder= " Select..."
228- options= {[
229- { label: ' Action' , value: ' v1' },
230- { label: ' Another action' , value: ' v2' },
231- { label: ' Something else here' , value: ' v3' }
232- ]}
233- value= " v1"
234- fixedWidth= {true }
235- / >
236- ```
237-
238- #### Text
239-
240- ``` js
241- < Button
242- dropdown
243- dropdownStyle= " text"
244- options= {[
245- { label: ' Action' , value: ' v1' },
246- { label: ' Another action' , value: ' v2' },
247- { label: ' Something else here' , value: ' v3' }
248- ]}
249- >
250- All Devices
251- < / Button>
252- ```
253-
254- #### Icon
255-
256- ``` js
257- < Button
258- dropdown
259- dropdownStyle= " text"
260- options= {[
261- { label: ' Action' , value: ' v1' },
262- { label: ' Another action' , value: ' v2' },
263- { label: ' Something else here' , value: ' v3' }
264- ]}
265- customValueRenderer= {(option ) => {
266- return (
267- < div>
268- < i className= " fa fa-database" / >
269- < span> {option .label }< / span>
270- < / div>
271- );
272- }}
273- >
274- All Devices
275- < / Button>
276- ```
277-
278- #### Dropdown Sizes
279-
280- ``` js
281- < Button btnSize= " large" dropdown> Large< / Button>
282- < Button btnSize= " medium" dropdown> Default< / Button>
283- < Button btnSize= " small" dropdown> Small< / Button>
284- < Button btnSize= " extra-small" dropdown> Extra Small< / Button>
285- ```
286-
287187## License
288188
289189MIT
0 commit comments