Denis Pupin (talk | contribs) |
Denis Pupin (talk | contribs) No edit summary |
||
Line 119: | Line 119: | ||
|[[File:Outlined button info.png|frameless]] | |[[File:Outlined button info.png|frameless]] | ||
|'''outlined info''' | |'''outlined info''' | ||
|} | |||
=== Text buttons === | |||
{| class="wikitable" | |||
!Example | |||
!Modifier-class | |||
|- | |||
|[[File:Text button default.png|frameless]] | |||
|'''flat''' | |||
|- | |||
|[[File:Text button danger.png|frameless]] | |||
|'''flat danger''' | |||
|- | |||
|[[File:Text button warning.png|frameless]] | |||
|'''flat warning''' | |||
|- | |||
|[[File:Text button success.png|frameless]] | |||
|'''flat success''' | |||
|- | |||
|[[File:Text button info.png|frameless]] | |||
|'''flat info''' | |||
|} | |} |
Revision as of 19:01, 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 |