Denis Pupin (talk | contribs) |
Denis Pupin (talk | contribs) |
||
| Line 169: | Line 169: | ||
[[File:Material Icons.png|alt=Choose icon on Material Design Icons website|none|thumb|561x561px|Choose icon on Material Design Icons website]] | [[File:Material Icons.png|alt=Choose icon on Material Design Icons website|none|thumb|561x561px|Choose icon on Material Design Icons website]] | ||
After you've chosen the icon which you want to add to your button click on the left bottom corner to expand icon description. There you will be able to copy name of the icon to the value of Tagged Value. | After you've chosen the icon which you want to add to your button click on the left bottom corner to expand icon description. There you will be able to copy name of the icon to the value of Tagged Value. | ||
[[File:Copy icon name.png|none|thumb|561x561px|Copy icon name to the value of TaggedValue "'''Icon'''"]] | |||
Revision as of 23:37, 12 December 2020
Getting started
MDriven Turnkey Style system based on the BEM methodology. BEM stands for Block, Element, Modifier and it is a convention on how to structure CSS rules. Read more here.
Out of the box you will receive the following UI elements:
- Static text
- Image
- Text field
- Checkbox
- Select (Combobox)
- Date picker
- Data-table
- Button
- File upload
- Link
- Textarea
- Number field
- Float field
Layout
MDriven Turnkey uses CSS Grid to create the application layout.
What is modifier-classes?
Modifier-classes allow you to customise MDriven Turnkey's components.
To use modifier-classes put them into the "Style ref" field in the ViewModel Editor.
Text elements
Context colors
From the box you're able to use five default contextual colours in MDriven Turnkey. You have an ability to modify them with help of CSS custom properties.
- danger
- warning
- success
- info
Chip
With help of the modifier-classes you can style your static text as chip component from Google Material design.
| Example | Modifier-class |
|---|---|
|
chip |
|
chip danger |
|
chip warning |
|
chip success |
|
chip info |
Info block
Coming soon...
Input controls
Input controls are rendered differently depending on the value type.
Text types
For inputs intended as type text, this type can be overridden with something else. Use the tagged value texttype on the column in the viewmodel.
- password
- tel
- url
- search
How these input types renders depends on the browser used.
For further reference, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
Buttons
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 have ability to add an icon to your button. To do that add the Tagged Value "Icon" to your ViewModelColumn which contains action. The value of Tagged Value should be the icon name. We use Material Design icons as the default icons for MDriven Turnkey application. Find the different icons on the following website Icons - Material Design.
Go to Icons – Material Design and choose the icon which you want to add to your button.
After you've chosen the icon which you want to add to your button click on the left bottom corner to expand icon description. There you will be able to copy name of the icon to the value of Tagged Value.
