Buton
Buton stilleri <a>, <button> veya
<input> öğeleri üzerinde kullanılabilir.
Butonlardaki İngilizce harfler büyük harfe dönüştürülür.
Kullanım
Buton bileşeni saf CSS ile yazılmıştır, etkinleşmesi için sadece HTML kodu yazmanız yeterlidir.
İlgili Okumalar
Stil
Düz buton
<a>, <button> veya <input> öğelerine .mdui-btn sınıfı eklenerek düz buton stili elde edilebilir.
<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>Yoğun buton
Yoğun butonlar normal butonlardan biraz daha küçüktür ve ana giriş yöntemi olarak fare ve klavyenin kullanıldığı senaryolar için uygundur. Normal bir butona .mdui-btn-dense sınıfı eklemeniz yeterlidir.
<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>Blok seviyesi öğe
Butona .mdui-btn-block sınıfı eklemek, onu üst öğenin %100 genişliğine uzatır ve butonu bir blok (block) seviyesi öğe haline getirir.
<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>Buton grubu
Birden fazla butonu bir .mdui-btn-group buton grubu kapsayıcısına yerleştirerek bir buton grubu oluşturun. Butonun seçili olduğunu belirtmek için .mdui-btn-active sınıfını ekleyin.
<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>