Turnkey Styling
No edit summary
(Adding page to Category:TOC because it contains a TOC.)
 
(5 intermediate revisions by 2 users not shown)
Line 61: Line 61:
=== Info Block ===
=== Info Block ===
Coming soon...
Coming soon...
== Input Controls ==
==== Helper Text ====
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 the ViewModel editor, where <ViewModelColumn> is the name of the column with input. 
[[File:Input control with helper text.png|none|thumb|420x420px|Input control with helper text]]
==== Placeholder ====
Placeholder text appears in the input control when it has no value set. Placeholder can be a tip for users on how to fill up this input control.
To add Placeholder to input control, create '''<ViewModelColumn>_Placeholder''' column in the ViewModel editor, where <ViewModelColumn> is the name of the column with input.
[[File:Input control with placeholder.png|none|thumb|422x422px|Input control with placeholder]]
Input controls are rendered differently depending on the value type.
Please check out [[Databound Placeholder text]] for more information.
==== 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
The type of browser used determines how these input types are rendered.
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 the input control to improve the visual presentation or give users the visual indicator of which type of input control it is.
To add an icon to the input control, set TaggedValue "Icon" on ViewModelColumn. The value of TaggedValue should be the icon name (MDriven Turnkey uses Material Icons – you can find these icon names on the [https://fonts.google.com/icons Google fonts website]).
It is possible to choose an icon position in the input control. By default, the icon will be placed at the start of the input control (leading icon). You can change this position by setting TaggedValue "IconPosition" to "after'.
[[File:Input control with leading icon.png|none|thumb|460x460px|Input control with leading icon]]
[[File:Input control with trailing icon.png|none|thumb|459x459px|Input control with trailing icon]]
[[File:Input control with leading icon and placeholder.png|none|thumb|460x460px|Input control with leading icon and placeholder]]
== Buttons ==
=== Data-bind Action's Presentation Name ===
Add '''<ActionColumn>_Presentation''' column in ViewModel to be able to 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 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: '''[https://fonts.google.com/icons Icons - Material Design]'''.
Go to [https://fonts.google.com/icons Icons – Material Design] and choose the icon you want to add to your button.
[[File:Material Icons.png|alt=Choose an icon on the Material Design Icons website|none|thumb|561x561px|Choose an icon on the Material Design Icons website]]
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.
[[File:Copy icon name.png|none|thumb|561x561px|Copy the icon name to the value of TaggedValue "'''Icon'''"]]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![[File:TaggedValue for Icon.png|none|thumb|564x564px|Add the name of the chosen icon to the TaggedValue value.]]
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).''
{| class="wikitable"
!Example
!Description
|-
|[[File:Leading icon button.png|frameless]]
|Default presentation of a button with a leading icon
|-
|[[File:Icon after button.png|frameless]]
|Presentation of a button with an 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 237: Line 84:
|[[File:Switch selected.png|frameless]]
|[[File:Switch selected.png|frameless]]
|Switch selected presentation
|Switch selected presentation
|}
== Groupbox ==
You can style the groupbox on your page as a material design card. Add the modifier-class "'''card'''" in <u>Style ref</u> to the ViewModelColumn with groupbox.
{| class="wikitable"
!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
|}
|}


Line 282: 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 the data you want to present in the Turnkey as a hyperlink. The text of the link will be the ViewModelColumn's name.
{{Edited|July|12|2024}}
 
If you want to change the text of the hyperlink or set it dynamically, you need to add another ViewModelColumn into your ViewModel and name it as '''<NameOfColumnWithHyperlink>_LinkText'''.


== Date Picker ==
[[Category:TOC]]

Latest revision as of 14:14, 26 March 2024


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 default.png chip
Chip danger.png chip danger
Chip warning.png chip warning
Chip success.png chip success
Chip info.png chip info

Info Block

Coming soon...

Checkbox and Switch

Checkbox is the default presentation of the boolean attribute in your model.

Example Description
Checkbox default.png Default checkbox presentation
Checkbox checked.png 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
Switch default.png Default switch presentation
Switch selected.png 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
Turnkey heading h1.png h1
Turnkey heading h2.png h2
Turnkey heading h3.png h3
Turnkey heading h4.png h4
Turnkey heading h5.png h5
Turnkey heading h6.png h6

See also: Layout and CSS

Date Picker

This page was edited 46 days ago on 03/26/2024. What links here
Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Turnkey_Styling&oldid=17767"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved