Gomb
A gombok stílusai az <a>, <button> vagy
<input> elemekhez is alkalmazhatók.
A gombokban lévő angol betűk nagybetűssé alakulnak.
Használat
A gomb komponens tiszta CSS-szel készült; a hatás eléréséhez csak HTML kódot kell írni.
Kapcsolódó olvasmányok
Stílus
Lapos gomb
A .mdui-btn osztály hozzáadásával az <a>, <button> vagy <input> elemekhez lapos gomb stílus adható.
<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>Kiemelt gomb
A .mdui-btn-raised osztály hozzáadása a lapos gombhoz megemelt (kiemelt) hatást kölcsönöz a gombnak.
<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>Sűrű gomb
A sűrű gombok valamivel kisebbek a normál gomboknál, és olyan helyzetekben hasznosak, ahol az egér és a billentyűzet a fő beviteli eszköz. A normál gombhoz egyszerűen adja hozzá a .mdui-btn-dense osztályt.
<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>Blokkszintű elem
A .mdui-btn-block osztály hozzáadásával a gomb kitölti a szülőelem teljes szélességét, és blokkszintű (block) elem lesz.
<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>Gombcsoport
Több gomb egy .mdui-btn-group konténerbe helyezésével gombcsoportot hozhat létre. Az .mdui-btn-active osztály hozzáadása a gombhoz azt jelzi, hogy a gomb kijelölt állapotban van.
<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>