NavigationBarGezinme Çubuğu

Gezinme çubuğu, mobil cihazlarda birkaç ana sayfa arasında kolayca geçiş yapmak için kullanılır.

Kullanım Şekli

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

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

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

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

Kullanım örneği: (Örnekteki style="position: relative" ifadesi yalnızca gösterim amacıyladır, gerçek kullanımda bu stili kaldırmanız gerekir.)

Öğe 1

Öğe 2

Öğe 3

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Önemli Notlar:

Bu bileşen varsayılan olarak position: fixed konumlandırmasını kullanır ve sayfa içeriğinin bu bileşen tarafından engellenmesini önlemek için body üzerine otomatik olarak padding-bottom stili ekler. Ancak aşağıdaki iki durumda varsayılan olarak position: absolute konumlandırması kullanılacaktır:

scroll-target özniteliği belirtildiğinde. Bu durumda padding-bottom stili, scroll-target öğesine eklenir.
Bileşen <mdui-layout></mdui-layout> içinde bulunduğunda. Bu durumda padding-bottom stili eklenmez.

Örnekler

Metin Etiketi Görünürlük Durumu

Gezinme çubuğundaki metin etiketleri, varsayılan olarak gezinme öğesi sayısı 3 veya daha az olduğunda her zaman görünür; gezinme öğesi sayısı 3'ten fazla olduğunda, yalnızca seçili durumdaki öğenin metni görünür.

Öğe 1

Öğe 2

Öğe 3

Öğe 1

Öğe 2

Öğe 3

Öğe 4

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="öğe-4">Öğe 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Kaynak Kodu

<mdui-navigation-bar> bileşeninde label-visibility özniteliğini ayarlayarak metin etiketlerinin görünürlük durumunu düzenleyebilirsiniz. Olası değerler:

selected: Yalnızca seçili durumdaki öğenin metnini göster
labeled: Metni her zaman göster
unlabeled: Metni asla gösterme

Öğe 1

Öğe 2

Öğe 3

seçili

etiketli

etiketsiz

<mdui-navigation-bar value="öğe-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">seçili</mdui-segmented-button>
  <mdui-segmented-button value="labeled">etiketli</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">etiketsiz</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationBar.labelVisibility = event.target.value;
  });
</script>

Kaynak Kodu

Belirtilen Konteynır İçinde

Varsayılan olarak, gezinme çubuğu geçerli pencereye göre sayfanın alt kısmında görüntülenir.

Gezinme çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, <mdui-navigation-bar> bileşeninde scroll-target özniteliğini belirtebilirsiniz. Bu özniteliğin değeri, kaydırılabilir içeriğe sahip konteynırın CSS seçicisi veya DOM öğesi olmalıdır. Bu durumda, gezinme çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye position: relative; overflow: hidden stillerini kendiniz eklemelisiniz).

Öğe 1

Öğe 2

Öğe 3

Sayfa içeriği

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="öğe-1">
    <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Sayfa içeriği</div>
  </div>
</div>

Kaynak Kodu

Kaydırma Sırasında Gizleme

<mdui-navigation-bar> bileşeninde scroll-behavior özniteliğini hide olarak ayarlayarak, sayfa aşağı kaydırıldığında gezinme çubuğunu gizleme ve yukarı kaydırıldığında gösterme efekti elde edebilirsiniz.

Gezinme çubuğunun kaç piksel kaydırmadan sonra gizlenmeye başlayacağını ayarlamak için scroll-threshold özniteliğini kullanın.

Öğe 1

Öğe 2

Öğe 3

Sayfa içeriği

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="öğe-1"
  >
    <mdui-navigation-bar-item icon="place" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="öğe-3">Öğe 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Sayfa içeriği</div>
  </div>
</div>

Kaynak Kodu

Simge

<mdui-navigation-bar-item> bileşeninde, icon özniteliği etkin olmayan durumdaki gezinme öğesi simgesini, active-icon özniteliği ise etkin durumdaki gezinme öğesi simgesini belirtmek için kullanılır. Ayrıca icon ve active-icon slot'ları aracılığıyla da etkin olmayan ve etkin durumdaki simge öğelerini belirtebilirsiniz.

Öğe 1

Öğe 2

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="öğe-1"
  >Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="öğe-2">
    Öğe 2
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Kaynak Kodu

Bağlantı

<mdui-navigation-bar-item> bileşeninde href özniteliğini ayarlayarak gezinme öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: download, target, rel.

Öğe 1

Öğe 2

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="öğe-1">Öğe 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Kaynak Kodu

Rozet

<mdui-navigation-bar-item> bileşeninde, badge slot'u aracılığıyla rozet ekleyebilirsiniz.

Öğe 1 99+

Öğe 2

<mdui-navigation-bar value="öğe-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="öğe-1">
    Öğe 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="öğe-2">Öğe 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Kaynak Kodu

Öznitelik	Özellik	Tür	Varsayılan
`icon`	`icon`	`string`	-
Etkin olmayan durumdaki Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`active-icon`	`activeIcon`	`string`	-
Etkin durumdaki Material Icons simge adı. `slot="active-icon"` ile de ayarlanabilir.
`value`	`value`	`string`	-
Gezinme öğesinin değeri.
`href`	`href`	`string`	-
Bağlantının hedef URL'si. Bu özellik ayarlandığında, bileşen dahili olarak bir `<a>` öğesi olarak işlenir ve bağlantı ile ilgili özellikler kullanılabilir hale gelir.
`download`	`download`	`string`	-
İndirme bağlantısının hedefi. Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Bağlantının nasıl açılacağı. Olası değerler: `_blank`: Bağlantıyı yeni bir pencerede açar `_parent`: Bağlantıyı üst çerçevede açar `_self`: Varsayılan. Bağlantıyı aynı çerçevede açar `_top`: Bağlantıyı tam pencerede açar Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Mevcut belge ile bağlantı verilen belge arasındaki ilişki. Olası değerler: `alternate`: Mevcut belgenin alternatif sürümü `author`: Mevcut belgenin veya makalenin yazarı `bookmark`: En yakın ata bölüm için kalıcı bağlantı `external`: Başvurulan belge, mevcut belgeyle aynı sitede değil `help`: İlgili yardım belgesine bağlantı `license`: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadır `me`: Mevcut belge, bağlantı içeriğinin sahibini temsil eder `next`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedir `nofollow`: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaz `noreferrer`: `Referer` başlığını içermez. `noopener` etkisine benzer `opener`: Köprü, üst düzey bir gezinme bağlamı oluşturuyorsa (yani `target` özellik değeri `_blank` ise), yardımcı bir gezinme bağlamı oluşturur `prev`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedir `search`: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlar `tag`: Mevcut belge için uygun bir etiket sağlar (belirtilen adres tarafından tanımlanır) Not: Yalnızca `href` özelliği belirtildiğinde kullanılabilir.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.

Ad
Varsayılan
Gezinme öğesi metni.
`icon`
Simge.
`active-icon`
Etkin durumdaki simge öğesi.
`badge`
Rozet.

Ad
`container`
Gezinme öğesi kabı.
`indicator`
Gösterge.
`badge`
Rozet.
`icon`
Simge.
`active-icon`
Etkin durumdaki simge.
`label`
Gezinme öğesi metni.

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

Öznitelik	Özellik	Tür	Varsayılan
`hide`	`hide`	`boolean`	`false`
Gizlenip gizlenmeyeceği.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Metnin görünürlük durumu. Olası değerler: `auto`: Seçenek sayısı 3 veya daha az olduğunda metin her zaman görünür; seçenek sayısı 3'ten fazla olduğunda yalnızca seçili durumdaki metin görünür `selected`: Metin yalnızca seçili durumda görünür `labeled`: Metin her zaman görünür `unlabeled`: Metin hiçbir zaman görünmez
`value`	`value`	`string`	-
Şu anda seçili olan `<mdui-navigation-bar-item>` değeri.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Kaydırma davranışı. Olası değerler: `hide`: Kaydırma sırasında gizlenir.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Kaydırma olaylarının izleneceği öğe. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak `window` nesnesinin kaydırma olaylarını izler.
`scroll-threshold`	`scrollThreshold`	`number`	-
Kaydırma davranışını tetiklemek için gereken kaydırma mesafesi. Birimi `px`'dir.
`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.

Ad
`change`
Değer değiştiğinde tetiklenir.
`show`
Gösterme başladığında tetiklenir. `event.preventDefault()` çağrılarak gösterim engellenebilir.
`shown`
Gösterme animasyonu tamamlandığında tetiklenir.
`hide`
Gizleme başladığında tetiklenir. `event.preventDefault()` çağrılarak gizleme engellenebilir.
`hidden`
Gizleme animasyonu tamamlandığında tetiklenir.

Ad
Varsayılan
`<mdui-navigation-bar-item>` bileşeni.

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

Menu Menü

Sonraki Bölüm

NavigationDrawer Gezinme Çekmecesi

NavigationBarGezinme Çubuğu

Kullanım Şekli

Örnekler

Metin Etiketi Görünürlük Durumu

Belirtilen Konteynır İçinde

Kaydırma Sırasında Gizleme

Simge

Bağlantı

Rozet

`mdui-navigation-bar-item` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts

CSS Custom Property

`mdui-navigation-bar` API

Özellikler

Olaylar

Slots

CSS Custom Property