Tlačítko
Styl tlačítka lze použít na prvcích <a>, <button> nebo
<input>.
Anglická písmena v tlačítku budou převedena na velká písmena.
Způsob volání
Komponenta tlačítka je napsána v čistém CSS, stačí napsat HTML kód.
Související čtení
Styl
Ploché tlačítko
Přidáním třídy .mdui-btn na prvky <a>, <button> nebo <input> získáte styl plochého tlačítka.
<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button><button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button><button class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>Zhuštěné tlačítko
Zhuštěné tlačítko je mírně menší než normální tlačítko a je vhodné pro případy, kdy je hlavní vstupní metodou myš a klávesnice. Můžete jej vytvořit přidáním třídy .mdui-btn-dense k normálnímu tlačítku.
<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button><button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
<i class="mdui-icon material-icons">add</i>
</button>Blokové prvky
Přidáním třídy .mdui-btn-block na tlačítko jej roztáhnete na 100 % šířky nadřazeného prvku a tlačítko se stane blokovým prvkem.
<div class="mdui-row-xs-2">
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
</div>Skupina tlačítek
Umístěním více tlačítek do kontejneru skupiny tlačítek .mdui-btn-group vytvoříte skupinu tlačítek. Přidáním třídy .mdui-btn-active na tlačítko jej označíte jako vybrané.
<div class="mdui-btn-group">
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_left</i>
</button>
<button type="button" class="mdui-btn mdui-btn-active">
<i class="mdui-icon material-icons">format_align_center</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_right</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_justify</i>
</button>
</div>