- 1 Getting started
- 2 Layout
- 3 What is modifier-classes?
- 4 Text elements
- 5 Input controls
- 6 Buttons
- 7 Checkbox and Switch
- 8 Groupbox
- 9 Typography
- 10 DataIsLink
- 11 Date picker
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
- Text field
- Select (Combobox)
- Date picker
- File upload
- Number field
- Float field
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.
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.
With help of the modifier-classes you can style your static text as chip component from Google Material design.
Helper text conveys additional guidance about the input control, such as how it will be used. Helper text will only take up a single line below the input control and will be persistently visible.
To add helper text to input control create <ViewModelColumn>_HelperText column in ViewModel editor, where <ViewModelColumn> is a name of column with input.
Placeholder text appears in the input control when it has no value set. Placeholder can be a tip for user how to fill up this input control.
To add placeholder to input control create <ViewModelColumn>_Placeholder column in ViewModel editor, where <ViewModelColumn> is a name of column with input.
Input controls are rendered differently depending on the value type.
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.
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
Inputs with icon
You can add an icon to input control to improve visual presentation or give users the visual indicator of which type of input control it is.
To add icon to the input control set TaggedValue "Icon" on ViewModelColumn. Value of TaggedValue should be the icon name (MDriven Turnkey uses Material Icons – you can find these icon names on Google fonts website).
It's possible to choose an icon position in the input control. By default icon will be placed in the start of input control (leading icon). You can change this position by setting TaggedValue "IconPosition" to "after'.
Data-bind action's presentation name
Add <ActionColumn>_Presentation column in ViewModel to be able dynamically change a presentation text of action.
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.
Also, you can choose the position of icon with help of TaggedValue – "IconPosiotion". (There are two available options: before or after. By default – before).
|Default presentation of button with leading icon|
|Presentation of button with icon after the button text|
|Icon button without button text|
|Icon button with addition of modifier-class "fab"|
Checkbox and Switch
Checkbox is the default presentation of the boolean attribute in your model.
|Default checkbox presentation|
|Checkbox checked presentation|
Switch is a different way how you can present your boolean attribute in MDriven Turnkey. To change presentation of boolean attribute from the default checkbox to switch set the TaggedValue "Switch" to your ViewModelColumn.
|Default swtich presentation|
|Switch selected presentation|
You can style the groupbox on your page as material design card. Add the modifier-class "card" in Style ref to the ViewModelColumn with groupbox.
|card||Groupbox styled as material design card.||-|
|-||Groupbox without header styled as material design card.||HideHeading = True|
With help of the modifier-classes you can style the text data in your Turnkey application as headings. The available modifier-classes are listed in the table below.
In the MDriven Turnkey you can represent your data string as a hyperlink. To make it you should set TaggedValue "DataIsLink" on your ViewModelColumn with data which you want to present in Turnkey as hyperlink. The text of the link will be ViewModelColumn's name.
If you want to change the text of hyperlink or set it dynamically you need to add another ViewModelColumn into your ViewModel and name it as <NameOfColumnWithHyperlink>_LinkText .