(Created page with "==Buttons== ===Data-bind Action's Presentation Name=== Add '''<ActionColumn>_Presentation''' column in ViewModel to be able to dynamically change a presentation text of action...") |
No edit summary |
||
Line 102: | Line 102: | ||
|Icon button with addition of modifier-class "'''fab'''" | |Icon button with addition of modifier-class "'''fab'''" | ||
|} | |} | ||
[[Category:Actions]] |
Revision as of 20:05, 18 June 2023
Buttons
Data-bind Action's Presentation Name
Add <ActionColumn>_Presentation column in ViewModel to be able to dynamically change a presentation text of 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 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 left bottom corner to expand the icon description. There you will be able to copy the name of the icon to the value of 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 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 – before).