Turnkey Styling
Denis Pupin (talk | contribs) (→Button) |
Denis Pupin (talk | contribs) |
||
| Line 25: | Line 25: | ||
=== Buttons === | === Buttons === | ||
<html> | |||
<head> | |||
<script src="/extensions/style-system-presentation/ripple.js"></script> | |||
<link ref="stylesheet" href="/extensions/style-system-presentation/style.css"></script> | |||
</head> | |||
<body> | |||
<h4 class="examples-header">Buttons</h4> | |||
<h6 class="examples-desc">Default buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Oulined buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect outlined danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect outlined warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect success outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect info outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect primary outlined">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect outlined" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Flat buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect flat">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect flat danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect flat warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect flat success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect flat info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect flat primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect flat" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
<h6 class="examples-desc">Shaped buttons in MDriven Turnkey</h6> | |||
<div class="examples"> | |||
<div class="examples__item" title="Default"> | |||
<button class="tk-button__native ripple-effect shaped">Button</button> | |||
</div> | |||
<div class="examples__item" title="Danger"> | |||
<button class="tk-button__native ripple-effect shaped danger">Button</button> | |||
</div> | |||
<div class="examples__item" title="Warning"> | |||
<button class="tk-button__native ripple-effect shaped warning">Button</button> | |||
</div> | |||
<div class="examples__item" title="Success"> | |||
<button class="tk-button__native ripple-effect shaped success">Button</button> | |||
</div> | |||
<div class="examples__item" title="Info"> | |||
<button class="tk-button__native ripple-effect shaped info">Button</button> | |||
</div> | |||
<div class="examples__item" title="Primary"> | |||
<button class="tk-button__native ripple-effect shaped primary">Button</button> | |||
</div> | |||
<div class="examples__item" title="Disabled"> | |||
<button class="tk-button__native ripple-effect shaped" disabled="disabled">Button</button> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
Revision as of 20:49, 30 July 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
Buttons
Default buttons in MDriven Turnkey
Oulined buttons in MDriven Turnkey
Flat buttons in MDriven Turnkey
Shaped buttons in MDriven Turnkey
This page was edited 35 days ago on 03/26/2024. What links here