NavigationDrawerGezinme Çekmecesi

Gezinme çekmecesi, sayfanın yan tarafında gezinme seçenekleri sunarak kullanıcının farklı sayfalara veya içeriklere hızlıca erişmesini sağlar.

Genellikle, gezinme çekmecesi içinde gezinme öğeleri eklemek için <mdui-list> bileşenini kullanabilirsiniz.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/navigation-drawer.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Kullanım örneği:

Gezinme çekmecesini kapat

Gezinme çekmecesini aç

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Gezinme çekmecesini kapat</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Gezinme çekmecesini aç</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Önemli Notlar:

Bu bileşen varsayılan olarak position: fixed konumlandırmasını kullanır.

modal özniteliği false olduğunda ve ekran genişliği --mdui-breakpoint-md değerine eşit veya büyük olduğunda, sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için body üzerine otomatik olarak padding-left veya padding-right stili eklenir.

Ancak aşağıdaki iki durumda varsayılan olarak position: absolute konumlandırması kullanılacaktır:

contained özniteliği true olduğunda.
Bileşen <mdui-layout></mdui-layout> içinde bulunduğunda. Bu durumda padding-left veya padding-right stili eklenmez.

Örnekler

Belirtilen Konteynır İçinde

Varsayılan olarak, gezinme çekmecesi geçerli pencereye göre sayfanın solunda veya sağında görüntülenir. Gezinme çekmecesini belirli bir konteynırın içine yerleştirmek istiyorsanız, contained özniteliğini ekleyebilirsiniz. Bu durumda, gezinme çekmecesi ana öğeye göre konumlandırılacaktır (ana öğeye position: relative; overflow: hidden; stilini kendiniz eklemelisiniz).

Gezinme çekmecesini kapat

Gezinme çekmecesini aç

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Gezinme çekmecesini kapat</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Gezinme çekmecesini aç</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Kaynak Kodu

modal özniteliğini eklemek, gezinme çekmecesi açıldığında bir kaplama katmanı görüntüler. Pencere veya ana öğe genişliğinin --mdui-breakpoint-md değerinden küçük olduğu durumlarda, bu parametreye bakılmaksızın her zaman bir kaplama katmanı gösterileceğini unutmayın.

close-on-esc özniteliğini eklemek, ESC tuşuna basıldığında gezinme çekmecesini kapatır.

close-on-overlay-click özniteliğini eklemek, kaplama katmanına tıklandığında gezinme çekmecesini kapatır.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Gezinme çekmecesini kapat</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Gezinme çekmecesini aç</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Kaynak Kodu

Sağ Tarafta Konumlandırma

placement özniteliğini right olarak ayarlayarak gezinme çekmecesini sayfanın sağ tarafında görüntüleyebilirsiniz.

Gezinme çekmecesini kapat

Gezinme çekmecesini aç

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Gezinme çekmecesini kapat</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Gezinme çekmecesini aç</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`open`	`open`	`boolean`	`false`
Gezinme çekmecesinin açık olup olmadığı.
`modal`	`modal`	`boolean`	`false`
Gezinme çekmecesi açıldığında kaplama katmanının gösterilip gösterilmeyeceği. Dar ekranlı cihazlarda (ekran genişliği `--mdui-breakpoint-md` değerinden küçükse), bu parametreye bakılmaksızın kaplama katmanı her zaman gösterilir.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Kaplama katmanı varken ESC tuşuna basıldığında gezinme çekmecesinin kapanıp kapanmayacağı.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Kaplama katmanına tıklandığında gezinme çekmecesinin kapanıp kapanmayacağı.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Gezinme çekmecesinin konumu. Olası değerler: `left`: Sol `right`: Sağ
`contained`	`contained`	`boolean`	`false`
Varsayılan olarak, gezinme çekmecesi `body` öğesine göre görüntülenir. Bu özellik `true` olarak ayarlandığında, gezinme çekmecesi üst öğesine göre görüntülenir. Not: Bu özellik ayarlanırken, üst öğede manuel olarak `position: relative; overflow: hidden;` stilleri ayarlanmalıdır.
`order`	`order`	`number`	-
Bu bileşenin `<mdui-layout>` içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer `0`'dır.

Olaylar

Ad
`open`
Gezinme çekmecesi açılmadan önce tetiklenir. `event.preventDefault()` çağrılarak gezinme çekmecesinin açılması engellenebilir.
`opened`
Gezinme çekmecesi açılma animasyonu tamamlandıktan sonra tetiklenir.
`close`
Gezinme çekmecesi kapanmadan önce tetiklenir. `event.preventDefault()` çağrılarak gezinme çekmecesinin kapanması engellenebilir.
`closed`
Gezinme çekmecesi kapanma animasyonu tamamlandıktan sonra tetiklenir.
`overlay-click`
Kaplama katmanına tıklandığında tetiklenir.

Slots

Ad
Varsayılan
Gezinme çekmecesindeki içerik.

CSS Parts

Ad
`overlay`
Kaplama katmanı.
`panel`
Gezinme çekmecesi kabı.

CSS Custom Property

Ad
`--shape-corner`
Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--z-index`
Bileşenin CSS `z-index` değeri.

Önceki Bölüm

NavigationBar Gezinme Çubuğu

Sonraki Bölüm

NavigationRail Gezinme Rayı