(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...") |
(Adding page to Category:TOC because it contains a TOC.) |
||
| (4 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
==Buttons== | ==Buttons== | ||
===Data-bind Action's Presentation Name=== | ===Data-bind Action's Presentation Name=== | ||
Add '''<ActionColumn>_Presentation | Add '''<ActionColumn>_Label''' ''(deprecated <ActionColumn>_Presentation)'' column in ViewModel to be able to dynamically change a presentation text of action. | ||
===Default Buttons=== | ===Default Buttons=== | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 102: | Line 103: | ||
|Icon button with addition of modifier-class "'''fab'''" | |Icon button with addition of modifier-class "'''fab'''" | ||
|} | |} | ||
[[Category:Actions]] | |||
{{Edited|July|12|2024}} | |||
[[Category:TOC]] | |||
Latest revision as of 13:45, 26 March 2024
Buttons
Data-bind Action's Presentation Name
Add <ActionColumn>_Label (deprecated <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).
| 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 addition of modifier-class "fab" |