Buttons
Data-bind Action's Presentation Name
Add <ActionColumn>_Label (deprecated <ActionColumn>_Presentation) column in ViewModel to be able to dynamically change the presentation text of an action.
Default Buttons
| Example | Modifier-class |
|---|---|
|
|
|
danger |
|
warning |
|
success |
|
info |
Outlined Buttons
| Example | Modifier-class |
|---|---|
|
outlined |
|
outlined danger |
|
outlined warning |
|
outlined success |
|
outlined info |
Text Buttons
| Example | Modifier-class |
|---|---|
|
flat |
|
flat danger |
|
flat warning |
|
flat success |
|
flat info |
Shaped Buttons
| Example | Modifier-class |
|---|---|
|
shaped |
|
shaped danger |
|
shaped warning |
|
shaped success |
|
shaped info |
Buttons With Icons
You can add an icon to your button. To do that, add the Tagged Value "Icon" to your ViewModelColumn which contains an action. The value of the Tagged Value should be the icon name. We use Material Design icons as the default icons for the MDriven Turnkey application. Find the different icons on the following website: Icons - Material Design.
Go to Icons – Material Design and choose the icon you want to add to your button.
After you've chosen the icon you want to add to your button, click on the bottom-left corner to expand the icon description. There you will be able to copy the name of the icon into the value of the Tagged Value.
NOTE: If the name is "Arrow back", you must probably use "arrow_back" - the MaterialDesign icon web page is not very clear on what name to use, but the space is replaced with an underscore and there are no capitals in the names!
Also, you can choose the position of the icon with the help of TaggedValue – "IconPosition". (There are two available options: before or after. By default, it is before.)
| Example | Description |
|---|---|
|
Default presentation of a button with a leading icon |
|
Presentation of a button with an icon after the button text |
|
Icon button without button text |
|
Icon button with the addition of modifier-class "fab" |