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

Alt Gezinme

Gezinme çubuğu sayfanın altına sabitlenir ve 3 ile 5 arasında seçenek içerebilir. Genellikle yalnızca mobil cihazlarda kullanılır. Her sayfada yalnızca bir gezinme çubuğu bulunabilir.

Kullanım

Etkinleşmesi için sadece HTML yazmanız yeterlidir.

İlgili Okumalar

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

Stil

Temel stil

Aşağıdaki örnek hem simgeyi hem de metni aynı anda gösterir, genellikle yalnızca 3 gezinme öğesi olduğunda kullanılır.

.mdui-bottom-nav-active sınıfına sahip gezinme öğesi varsayılan olarak etkin durumda olacaktır.

Örnek

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

Yalnızca simgeleri göster

Örnek

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

Yalnızca metni göster

Örnek

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

Metni yalnızca etkin durumdayken göster

<div class="mdui-bottom-nav"></div> öğesine .mdui-bottom-nav-text-auto sınıfı eklenerek bu efekt elde edilebilir.

Genellikle 4 veya 5 gezinme öğesi olduğunda bu yöntem kullanılır. Varsayılan olarak yalnızca simgeler gösterilir ve gezinme öğesi etkinleştirildikten sonra metin gösterilir.

Örnek

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Arka plan rengi

<div class="mdui-bottom-nav"></div> öğesine .mdui-color-[color] sınıfı eklenerek gezinme çubuğuna arka plan rengi verilebilir.

Örnek

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Sayfanın altına sabitle

body öğesine .mdui-bottom-nav-fixed sınıfı eklenerek gezinme çubuğu sayfanın altına sabitlenebilir ve kaydırma sırasında sabit kalır.

Bu sınıfın .mdui-bottom-nav öğesine değil, body öğesine eklenmesi gerekir. Çünkü gezinme çubuğunu sabitlemenin yanı sıra, body öğesine padding-bottom ekleyerek gezinme çubuğunun sayfa içeriğini kapatmasını önler.

Otomatik gizle

.mdui-bottom-nav-scroll-hide sınıfı eklenerek sayfa aşağı kaydırıldığında gezinme çubuğunun gizlenmesi ve yukarı kaydırıldığında gösterilmesi sağlanabilir.

Not:

Gezinme çubuğu sayfanın altına sabitlenmemişse bu özellik çalışmaz.
Öğe dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır.

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>

Çalıştır

Olay

Olay Adı	Hedef	Açıklama	Parametreler
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Gezinme öğesi değiştirildiğinde bu olay tetiklenir.	`event._detail.index`: Etkinleştirilen gezinme öğesinin dizin numarası.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-bottom-nav`	Gezinme çubuğu bileşenini tanımlar.
`.mdui-bottom-nav-active`	Gezinme öğesini etkin duruma getirir.
`.mdui-bottom-nav-text-auto`	Gezinme çubuğunun metni yalnızca etkin durumdayken göstermesini sağlar.
`.mdui-bottom-nav-fixed`	Gezinme çubuğunu sayfanın altına sabitler (`body` öğesine eklenmelidir).
`.mdui-bottom-nav-scroll-hide`	Sayfa aşağı kaydırıldığında gezinme çubuğunu gizler, yukarı kaydırıldığında gösterir.

Gezinme Çekmecesi

Kart