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

Uygulama Çubuğu

Uygulama çubuğu genellikle sayfanın üst kısmında bulunur ve araç çubukları, sekmeler gibi bileşenler içerebilir. Bir sayfada yalnızca bir uygulama çubuğu olabilir.

Kullanım

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

Renk

Uygulama çubuğu arka plan rengi içermez. Uygulama çubuğunun alt öğeleri (araç çubukları, sekmeler vb.) için arka plan rengi ayarlayabilirsiniz.

İlgili Okumalar

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

Stil

Yalnızca araç çubuğu

Örnek

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Yalnızca sekmeler

Örnek

<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Araç çubuğu ve sekmeler dahil

Örnek

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Örnek

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

Şeffaf arka plan

Uygulama çubuğunun gölgesini kaldırmak için .mdui-shadow-0 sınıfını eklemeniz gerekir.

Örnek

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Sayfanın üst kısmına sabitle

<div class="mdui-appbar"></div> üzerine .mdui-appbar-fixed sınıfı eklenerek uygulama çubuğu sayfanın üstüne sabitlenebilir ve kaydırma sırasında sabit kalır.

Uygulama çubuğunun sayfa içeriğini kaplamasını önlemek için, body öğesine padding-top ekleyen bir sınıf eklemeniz gerekir:

.mdui-appbar-with-toolbar: Uygulama çubuğunda araç çubuğu olduğunda bu sınıf eklenmelidir.
.mdui-appbar-with-tab: Uygulama çubuğunda sekmeler olduğunda bu sınıf eklenmelidir.
.mdui-appbar-with-tab-larger: Uygulama çubuğunda hem simge hem de metin içeren sekmeler olduğunda bu sınıf eklenmelidir.

Uygulama çubuğunda araç çubuğu ve sekmeler dışında başka öğeler varsa, body için uygun padding-top değerini kendiniz eklemeniz gerekir.

Örnek 1 Örnek 2 Örnek 3

Uygulama çubuğunu otomatik gizle

<div class="mdui-appbar"></div> üzerine .mdui-appbar-scroll-hide sınıfı eklenerek, sayfa aşağı kaydırıldığında uygulama çubuğunun gizlenmesi ve yukarı kaydırıldığında gösterilmesi sağlanabilir.

Öğe dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>

Çalıştır

Uygulama çubuğundaki araç çubuğunu otomatik gizle

<div class="mdui-appbar"></div> üzerine .mdui-appbar-scroll-toolbar-hide sınıfı eklenerek, uygulama çubuğu hem araç çubuğu hem de sekmeler içerdiğinde, sayfa aşağı kaydırıldığında araç çubuğunun gizlenmesi ve yukarı kaydırıldığında gösterilmesi sağlanabilir.

Öğe dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır.

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>

Çalıştır

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-appbar`	Bir uygulama çubuğu tanımlar.
`.mdui-appbar-fixed`	Uygulama çubuğunu sayfanın üstüne sabitler.
`.mdui-appbar-with-toolbar`	Uygulama çubuğu araç çubuğu içerdiğinde `body` üzerine bu sınıf eklenmelidir
`.mdui-appbar-with-tab`	Uygulama çubuğu sekme içerdiğinde `body` üzerine bu sınıf eklenmelidir.
`.mdui-appbar-with-tab-larger`	Uygulama çubuğu hem simge hem de metin içeren sekmeler içerdiğinde `body` üzerine bu sınıf eklenmelidir
`.mdui-appbar-scroll-hide`	Sayfa aşağı kaydırıldığında uygulama çubuğunu gizler, yukarı kaydırıldığında gösterir.
`.mdui-appbar-scroll-toolbar-hide`	Uygulama çubuğu hem araç çubuğu hem de sekmeler içerdiğinde, sayfa aşağı kaydırıldığında araç çubuğunu gizler, yukarı kaydırıldığında gösterir.

Araç Çubuğu

Gezinme Çekmecesi