Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Araç Çubuğu

Araç çubuğu, metin, bağlantı, buton, simge butonu gibi öğeleri içerebilen yatay olarak düzenlenmiş bileşenlerin bir koleksiyonudur.

Kullanım

Araç çubuğu bileşeni saf CSS ile yazılmıştır, etkinleşmesi için sadece HTML kodu yazmanız yeterlidir.

Renk

Varsayılan olarak şeffaf arka plana sahiptir, arka plan rengini ayarlamak için .mdui-color-[color] sınıfını ekleyebilirsiniz.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Araç çubuğu

Material Design tasarım yönergeleri: Yapı - Araç çubuğu

Stil

Temel stil

Araç çubuğuna şunlar yerleştirilebilir:

Metin: <span>Başlık</span>
Bağlantı: <a href="#">Bağlantı</a>
Buton: <a href="#" class="mdui-btn">buton</a>
Simge butonu: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
Simge: <i class="mdui-icon material-icons">menu</i>

<div class="mdui-toolbar-spacer"></div> eklemek, bu öğenin her iki yanındaki içeriği her iki tarafa itecektir.

Örnek

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

Arka plan rengi

Örnek

<div class="mdui-toolbar mdui-color-theme">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-toolbar`	Bir araç çubuğu tanımlar.
`.mdui-toolbar-spacer`	Bu öğenin her iki yanındaki öğeler her iki tarafa itilir.

Sekme

Uygulama Çubuğu