|
|
(20 intermediate revisions by 4 users not shown) |
Line 1: |
Line 1: |
| [[Category:MDriven Turnkey]] | | [[Category:MDriven Turnkey]] |
|
| |
|
| === Getting started === | | === 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. [https://de.wikipedia.org/wiki/Block,_Element,_Modifier Read more here]. | | The MDriven Turnkey Style system is based on the BEM methodology. BEM stands for Block, Element, Modifier and is a convention on how to structure CSS rules. [https://de.wikipedia.org/wiki/Block,_Element,_Modifier Read more here]. |
|
| |
|
| Out of the box you will receive the following UI elements: | | Out of the box, you will receive the following UI elements: |
| * Static text | | * Static text |
| * Image | | * Image |
Line 20: |
Line 20: |
|
| |
|
| == Layout == | | == Layout == |
| MDriven Turnkey uses CSS Grid to create the application layout. | | MDriven Turnkey uses the CSS Grid to create the application layout - unless you make use of [[PlacingContainer|placingcontainers]] - then the CSS flexbox is the core layout creator. |
|
| |
|
| == What is modifier-classes? == | | == What are Modifier-classes? == |
| Modifier-classes allow you to customise MDriven Turnkey's components. | | 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. | | To use modifier-classes, put them into the "'''Style ref'''" field in the ViewModel Editor. |
| [[File:StyleRef field in ViewModel editor.png|none|thumb|708x708px|'''Style ref''' in ViewModel editor]] | | [[File:StyleRef field in ViewModel editor.png|none|thumb|708x708px|'''Style ref''' in ViewModel editor]] |
|
| |
|
| == Text elements == | | == Text Elements == |
|
| |
|
| === Context colors === | | === 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. | | From the box, you're able to use five default contextual colours in MDriven Turnkey. You can modify them with the help of CSS custom properties. |
| * danger | | * Danger |
| * warning | | * Warning |
| * success | | * Success |
| * info | | * Info |
|
| |
|
| === Chip === | | === Chip === |
| With help of the modifier-classes you can style your static text as chip component from Google Material design. | | With the help of the modifier-classes, you can style your static text as a chip component from Google Material design. |
| {| class="wikitable" | | {| class="wikitable" |
| !Example | | !Example |
Line 59: |
Line 59: |
| |} | | |} |
|
| |
|
| === Info block === | | === Info Block === |
| Coming soon... | | Coming soon... |
|
| |
| == Input controls ==
| |
|
| |
| ==== Helper text ====
| |
| <ViewModelColumn>_HelperText
| |
|
| |
| ==== Placeholder ====
| |
| <ViewModelColumn>_Placeholder
| |
|
| |
| 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
| |
| * email
| |
| * 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 ==
| |
|
| |
| === Data-bind action's presentation name ===
| |
| Add '''<ActionColumn>_Presentation''' column in ViewModel to be able dynamically change a presentation text of action.
| |
|
| |
| === Default buttons ===
| |
| {| class="wikitable"
| |
| !Example
| |
| !Modifier-class
| |
| |-
| |
| |[[File:Button default.png|frameless]]
| |
| |
| |
| |-
| |
| |[[File:Button danger.png|frameless]]
| |
| |'''danger'''
| |
| |-
| |
| |[[File:Button warning.png|frameless]]
| |
| |'''warning'''
| |
| |-
| |
| |[[File:Button success.png|frameless]]
| |
| |'''success'''
| |
| |-
| |
| |[[File:Button info.png|frameless]]
| |
| |'''info'''
| |
| |}
| |
|
| |
| === Outlined buttons ===
| |
| {| class="wikitable"
| |
| !Example
| |
| !Modifier-class
| |
| |-
| |
| |[[File:Outlined button default.png|frameless]]
| |
| |'''outlined'''
| |
| |-
| |
| |[[File:Outlined button danger.png|frameless]]
| |
| |'''outlined danger'''
| |
| |-
| |
| |[[File:Outlined button warning.png|frameless]]
| |
| |'''outlined warning'''
| |
| |-
| |
| |[[File:Outlined button success.png|frameless]]
| |
| |'''outlined success'''
| |
| |-
| |
| |[[File:Outlined button info.png|frameless]]
| |
| |'''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'''
| |
| |}
| |
|
| |
| === Shaped buttons ===
| |
| {| class="wikitable"
| |
| !Example
| |
| !Modifier-class
| |
| |-
| |
| |[[File:Shaped button default.png|frameless]]
| |
| |'''shaped'''
| |
| |-
| |
| |[[File:Shaped button danger.png|frameless]]
| |
| |'''shaped danger'''
| |
| |-
| |
| |[[File:Shaped button warning.png|frameless]]
| |
| |'''shaped warning'''
| |
| |-
| |
| |[[File:Shaped button success.png|frameless]]
| |
| |'''shaped success'''
| |
| |-
| |
| |[[File:Shaped button info.png|frameless]]
| |
| |'''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 [https://material.io/resources/icons/?style=baseline '''Icons - Material Design'''].
| |
|
| |
| Go to [https://material.io/resources/icons/?style=baseline Icons – Material Design] and choose the icon which you want to add to your button.
| |
| [[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.
| |
| [[File:Copy icon name.png|none|thumb|561x561px|Copy icon name to the value of TaggedValue "'''Icon'''"]]
| |
| [[File:TaggedValue for Icon.png|none|thumb|564x564px|Add the name of chosen icon into the TaggedValue 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).''
| |
|
| |
| {| class="wikitable"
| |
| !Example
| |
| !Description
| |
| |-
| |
| |[[File:Leading icon button.png|frameless]]
| |
| |Default presentation of button with leading icon
| |
| |-
| |
| |[[File:Icon after button.png|frameless]]
| |
| |Presentation of button with icon after the button text
| |
| |-
| |
| |[[File:Icon button.png|frameless]]
| |
| |Icon button without button text
| |
| |-
| |
| |[[File:Fab icon button.png|frameless]]
| |
| |Icon button with addition of modifier-class "'''fab'''"
| |
| |}
| |
|
| |
|
| == Checkbox and Switch == | | == Checkbox and Switch == |
Line 211: |
Line 74: |
| |Checkbox checked 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. | | '''Switch''' is a different way in which you can present your boolean attribute in MDriven Turnkey. To change the presentation of the boolean attribute from the default '''checkbox''' to '''switch,''' set the '''TaggedValue "Switch"''' to your ViewModelColumn. |
| {| class="wikitable" | | {| class="wikitable" |
| !Exmaple | | !Example |
| !Description | | !Description |
| |- | | |- |
| |[[File:Switch default.png|frameless]] | | |[[File:Switch default.png|frameless]] |
| |Default swtich presentation | | |Default switch presentation |
| |- | | |- |
| |[[File:Switch selected.png|frameless]] | | |[[File:Switch selected.png|frameless]] |
Line 223: |
Line 86: |
| |} | | |} |
|
| |
|
| == Groupbox == | | == Typography == |
| You can style the groupbox on your page as material design card. Add the modifier-class "'''card'''" in <u>Style ref</u> to the ViewModelColumn with groupbox.
| | With the 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. |
| {| class="wikitable" | | {| class="wikitable" |
| !Example | | !Example |
| !Modifier-class
| |
| !Description
| |
| !Tagged value
| |
| |-
| |
| |[[File:Group-card.png|frameless]]
| |
| |'''card'''
| |
| |Groupbox styled as material design card.
| |
| | -
| |
| |-
| |
| |[[File:Groupbox card without header.png|frameless|292x292px]]
| |
| |<nowiki>-</nowiki>
| |
| |Groupbox without header styled as material design card.
| |
| |HideHeading = True
| |
| |}
| |
|
| |
| == Typography ==
| |
| 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.
| |
| {| class="wikitable"
| |
| !Exmaple
| |
| !Modifier-class | | !Modifier-class |
| |- | | |- |
Line 266: |
Line 110: |
| |'''h6''' | | |'''h6''' |
| |} | | |} |
| | See also: [[Layout and CSS]] |
|
| |
|
| == DataIsLink == | | == Date Picker == |
| In the MDriven Turnkey you can represent your data string as a hyperlink. To make it you should set [[MDrivenDesignerTaggedValueHints|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.
| | {{Edited|July|12|2024}} |
| | |
| 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''' .
| |
|
| |
|
| == Date picker ==
| | [[Category:TOC]] |
Getting Started
The MDriven Turnkey Style system is based on the BEM methodology. BEM stands for Block, Element, Modifier and 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 the CSS Grid to create the application layout - unless you make use of placingcontainers - then the CSS flexbox is the core layout creator.
What are 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.
Style ref in ViewModel editor
Text Elements
Context Colors
From the box, you're able to use five default contextual colours in MDriven Turnkey. You can modify them with the help of CSS custom properties.
- Danger
- Warning
- Success
- Info
Chip
With the help of the modifier-classes, you can style your static text as a chip component from Google Material design.
Example
|
Modifier-class
|
|
chip
|
|
chip danger
|
|
chip warning
|
|
chip success
|
|
chip info
|
Info Block
Coming soon...
Checkbox and Switch
Checkbox is the default presentation of the boolean attribute in your model.
Example
|
Description
|
|
Default checkbox presentation
|
|
Checkbox checked presentation
|
Switch is a different way in which you can present your boolean attribute in MDriven Turnkey. To change the presentation of the boolean attribute from the default checkbox to switch, set the TaggedValue "Switch" to your ViewModelColumn.
Example
|
Description
|
|
Default switch presentation
|
|
Switch selected presentation
|
Typography
With the 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.
Example
|
Modifier-class
|
|
h1
|
|
h2
|
|
h3
|
|
h4
|
|
h5
|
|
h6
|
See also: Layout and CSS
Date Picker