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

Gezinme Çekmecesi

mdui'deki gezinme çekmeceleri sayfanın solundan veya sağından dışarı kayabilir ve bir sayfa birden fazla gezinme çekmecesine sahip olabilir.

Gezinme çekmecesi telefonlarda, tabletlerde ve masaüstü cihazlarda biraz farklı davranır. Bu sayfanın sol tarafındaki gezinme çekmecesindeki değişiklikleri tarayıcı genişliğini değiştirerek gözlemleyebilirsiniz:

Yükseklik
- Telefonlarda ve tabletlerde, gezinme çekmecesinin yüksekliği her zaman %100'dür.
- Masaüstü cihazlarda, gezinme çekmecesi varsayılan olarak uygulama çubuğunu (app bar) kapsamaz ve sayfanın üstünden bir uygulama çubuğu yüksekliği kadar mesafededir. .mdui-drawer-full-height sınıfını eklemek, gezinme çekmecesinin yüksekliğini %100 yapabilir; bu durumda gezinme çekmecesi uygulama çubuğunun üzerine binebilir. Uygulama çubuğunun gezinme çekmecesi tarafından kapatılmaması için uygulama çubuğuna .mdui-appbar-inset sınıfı eklenebilir.
Arka Plan Rengi ve Gölge
- Telefonlarda ve tabletlerde, gezinme çekmecesi varsayılan olarak beyaz arka plana ve gölgeye sahiptir.
- Masaüstü cihazlarda, gezinme çekmecesi varsayılan olarak şeffaf arka plana sahiptir ve gölgesi yoktur. .mdui-color-[color] sınıfını eklemek, gezinme çekmecesinin arka plan rengini ayarlayabilir ve gölge ekleyebilir.
Görünürlük Durumu
- Telefonlarda ve tabletlerde, gezinme çekmecesi varsayılan olarak gizlidir.
- Masaüstü cihazlarda, gezinme çekmecesi varsayılan olarak görünür durumdadır.
- .mdui-drawer-open sınıfını eklemek, gezinme çekmecesinin tüm cihazlarda varsayılan olarak görünmesini sağlar; .mdui-drawer-close sınıfını eklemek ise gezinme çekmecesinin tüm cihazlarda varsayılan olarak gizlenmesini sağlar.
Maske (Overlay)
- Telefonlarda ve tabletlerde, gezinme çekmecesi açıldığında her zaman bir maske katmanı gösterilir.
- Masaüstü cihazlarda, gezinme çekmecesi açıldığında varsayılan olarak maske katmanı gösterilmez. overlay parametresini true olarak ayarlamak, gezinme çekmecesi açıldığında maske katmanının gösterilmesini sağlar. Eğer maske katmanının gösterilmesi ayarlanmışsa, gezinme çekmecesinin varsayılan olarak gizli kalması için .mdui-drawer-close sınıfı eklenmelidir.

Kullanım

(Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılması gerekir)
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Desenler - Gezinme Çekmecesi

Kullanım

HTML Yapısı

<!-- mdui-drawer-body-left sınıfı body öğesine padding-left ekler; solda varsayılan olarak açık olan bir gezinme çekmecesi olduğu sürece bu sınıf eklenmelidir. -->
<!-- mdui-drawer-body-right sınıfı body öğesine padding-right ekler; sağda varsayılan olarak açık olan bir gezinme çekmecesi olduğu sürece bu sınıf eklenmelidir. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Sol taraftaki varsayılan gezinme çekmecesi -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Gezinme çekmecesinin sağ tarafta olması gerekiyorsa mdui-drawer-right sınıfı eklenmelidir. -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Öznitelik ile Çağır

Bu yöntemi kullanırken JavaScript kodu yazmanıza gerek yoktur. Kontrol görevi gören bir öğeye (örneğin: bir buton) mdui-drawer="options" özniteliği eklemeniz yeterlidir. Özel öznitelik aracılığıyla çağrılırken, kontrol edilen gezinme çekmecesini belirtmek için ek bir target parametresi eklenmesi gerekir; değeri, kontrol edilen gezinme çekmecesinin CSS seçicisidir.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

Olayları bağlamak için gezinme çekmecesindeki öğelere bazı öznitelikler eklenebilir; bu öznitelikler JavaScript çağrı yöntemi kullanılırken de kullanılabilir.

Öznitelik	Açıklama
`mdui-drawer-close`	Bu öğeye tıklamak `close.mdui.drawer` olayını tetikler ve gezinme çekmecesini kapatır.

JavaScript ile Çağır

// selector, gezinme çekmecesinin CSS seçicisi veya DOM öğesidir
// options, yapılandırma parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Drawer(selector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`overlay`	`boolean`	`false`	Gezinme çekmecesi açıldığında maske katmanının gösterilip gösterilmeyeceği. Bu parametre yalnızca orta büyüklükteki ve daha büyük ekranlı cihazlar için geçerlidir; ultra küçük ve küçük ekranlı cihazlarda maske katmanı her zaman gösterilir.
`swipe`	`boolean`	`false`	Kaydırma hareketinin etkin olup olmayacağı.

Yöntem

Yöntem Adı	Açıklama
`open`	Gezinme çekmecesini gösterir.
`close`	Gezinme çekmecesini gizler.
`toggle`	Gezinme çekmecesinin görünürlük durumunu değiştirir.
`getState`	Mevcut gezinme çekmecesinin durumunu döndürür. Toplam dört durum içerir (`opening`, `opened`, `closing`, `closed`).

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.drawer`	Gezinme çekmecesi açılma animasyonuna başladığında olay tetiklenir.	`<div class="mdui-drawer"></div>`	`event._detail.inst`: Örnek
`opened.mdui.drawer`	Gezinme çekmecesi açılma animasyonunu tamamladığında olay tetiklenir.
`close.mdui.drawer`	Gezinme çekmecesi kapanma animasyonuna başladığında olay tetiklenir.
`closed.mdui.drawer`	Gezinme çekmecesi kapanma animasyonunu tamamladığında olay tetiklenir.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-drawer`	Bir gezinme çekmecesi tanımlar.
`.mdui-drawer-right`	Sayfanın sağ tarafındaki gezinme çekmecesi.
`.mdui-drawer-full-height`	Gezinme çekmecesinin %100 yükseklikte olmasını sağlar.
`.mdui-drawer-open`	Gezinme çekmecesinin varsayılan olarak görünür durumda olmasını sağlar.
`.mdui-drawer-close`	Gezinme çekmecesinin varsayılan olarak gizli durumda olmasını sağlar.
`.mdui-drawer-body-left`	`body` öğesine `padding-left` ekler.
`.mdui-drawer-body-right`	`body` öğesine `padding-right` ekler.

Uygulama Çubuğu

Alt Gezinme