Turnkey Styling
Line 227: Line 227:
| -
| -
|-
|-
|[[File:Groupbox card without header.png|frameless|220x220px]]
|[[File:Groupbox card without header.png|frameless|276x276px]]
|<nowiki>-</nowiki>
|<nowiki>-</nowiki>
|Groupbox without header styled as material design card.
|Groupbox without header styled as material design card.
|HideHeading = True
|HideHeading = True
|}
|}

Revision as of 22:18, 12 January 2021


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.

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 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 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...

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
  • 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

Default buttons

Example Modifier-class
Button default.png
Button danger.png danger
Button warning.png warning
Button success.png success
Button info.png info

Outlined buttons

Example Modifier-class
Outlined button default.png outlined
Outlined button danger.png outlined danger
Outlined button warning.png outlined warning
Outlined button success.png outlined success
Outlined button info.png outlined info

Text buttons

Example Modifier-class
Text button default.png flat
Text button danger.png flat danger
Text button warning.png flat warning
Text button success.png flat success
Text button info.png flat info

Shaped buttons

Example Modifier-class
Shaped button default.png shaped
Shaped button danger.png shaped danger
Shaped button warning.png shaped warning
Shaped button success.png shaped success
Shaped button info.png 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.

Choose icon on Material Design Icons website
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.

Copy icon name to the value of TaggedValue "Icon"
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).

Example Description
Leading icon button.png Default presentation of button with leading icon
Icon after button.png Presentation of button with icon after the button text
Icon button.png Icon button without button text
Fab icon button.png Icon button with addition of modifier-class "fab"

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 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.

Exmaple Description
Switch default.png Default swtich presentation
Switch selected.png Switch selected presentation

Groupbox

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.

Example Modifier-class Description Tagged value
Group-card.png card Groupbox styled as material design card. -
Groupbox card without header.png - Groupbox without header styled as material design card. HideHeading = True
This page was edited 2 days ago on 03/26/2024. What links here