Denis Pupin (talk | contribs) |
Denis Pupin (talk | contribs) |
||
| Line 182: | Line 182: | ||
<body> | <body> | ||
<div class="examples checkbox"> | <div class="examples checkbox"> | ||
<div class="examples__item checkbox" title=" | <div class="examples__item checkbox" title="Enabled selected/unselected state"> | ||
<div class="tk-checkbox__inner"> | <div class="tk-checkbox__inner"> | ||
<label class="tk-checkbox__content ripple-effect"> | <label class="tk-checkbox__content ripple-effect"> | ||
| Line 190: | Line 190: | ||
<label for="checkbox" class="tk-checkbox__label">Checkbox control</label></div> | <label for="checkbox" class="tk-checkbox__label">Checkbox control</label></div> | ||
</div> | </div> | ||
<div class="examples__item checkbox" title="Disabled | <div class="examples__item checkbox" title="Disabled state"> | ||
<div class="tk-checkbox__inner"> | <div class="tk-checkbox__inner"> | ||
<label class="tk-checkbox__content ripple-effect"> | <label class="tk-checkbox__content ripple-effect"> | ||
| Line 198: | Line 198: | ||
<label for="Checkbox.disabled" class="tk-checkbox__label">Checkbox control</label></div> | <label for="Checkbox.disabled" class="tk-checkbox__label">Checkbox control</label></div> | ||
</div> | </div> | ||
<div class="examples__item checkbox" title=" | <div class="examples__item checkbox" title="Selected disabled state"> | ||
<div class="tk-checkbox__inner"> | <div class="tk-checkbox__inner"> | ||
<label class="tk-checkbox__content ripple-effect"> | <label class="tk-checkbox__content ripple-effect"> | ||
| Line 215: | Line 215: | ||
<body> | <body> | ||
<div class="examples checkbox"> | <div class="examples checkbox"> | ||
<div class="examples__item checkbox" title="Enabled selected/unselected | <div class="examples__item checkbox" title="Enabled selected/unselected state"> | ||
<div class="tk-switch__inner"> | <div class="tk-switch__inner"> | ||
<input type="checkbox" name="Switch" id="switch" class="tk-switch__native"> | <input type="checkbox" name="Switch" id="switch" class="tk-switch__native"> | ||
| Line 239: | Line 239: | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="examples__item checkbox" title="Selected disabled"> | <div class="examples__item checkbox" title="Selected disabled state"> | ||
<div class="tk-switch__inner"> | <div class="tk-switch__inner"> | ||
<input type="checkbox" name="Switch" id="switch.checked" class="tk-switch__native" disabled checked> | <input type="checkbox" name="Switch" id="switch.checked" class="tk-switch__native" disabled checked> | ||
Revision as of 11:12, 19 September 2019
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.
Components
Buttons
Out of the box in MDriven Turnkey you have the default button styles, but you can modify it with the predefined Modifier-classes. To style your buttons add the modifier classes to style-reference in your viewmodel column. Find out all predefined modifier classes for the buttons, below.
Generic modifier classes for the buttons:
- danger
- warning
- success
- info
- primary (applies primary color of your application)
Default buttons in MDriven Turnkey
Use the generic modifier classes with the default buttons to change their style.
Oulined buttons in MDriven Turnkey. (Style ref: outlined)
Add to style-references "outlined" in your viewmodel column. Also, you can use generic modifier classes in pair with "outlined". For example: "outlined danger", "outlined warning", "outlined primary".
Flat buttons in MDriven Turnkey. (Style ref: flat)
Add to style-references "flat" in your viewmodel column. Also, you can use generic modifier classes in pair with "flat". For example: "flat danger", "flat warning", "flat primary".
Shaped buttons in MDriven Turnkey. (Style ref: shaped)
Add to style-references "shaped" in your viewmodel column. Also, you can use generic modifier classes in pair with "shaped". For example: "shaped danger", "shaped warning", "shaped primary".
Checkbox control
Switch control