NavigationRailGezinme Rayı
Yan gezinme çubuğu, tablet ve masaüstü bilgisayarlarda farklı ana sayfalara erişim sağlamak için kullanılır.
Bileşenleri ihtiyacınıza göre içe aktarın:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-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.)
Son
Resimler
Kitaplık
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
Ö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-left veya padding-right stili ekler.
Ancak aşağıdaki iki durumda varsayılan olarak position: absolute konumlandırması kullanılacaktır:
<mdui-navigation-rail> bileşeninin contained özniteliği true olduğunda. Bu durumda padding-left veya padding-right stili, ana öğeye eklenir.<mdui-layout></mdui-layout> bileşeninin içinde bulunduğunda. Bu durumda padding-left veya padding-right stili eklenmez.
Varsayılan olarak, yan gezinme çubuğu geçerli pencereye göre sayfanın solunda veya sağında görüntülenir. Yan gezinme çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, <mdui-navigation-rail> bileşenine contained özniteliğini ekleyebilirsiniz. Bu durumda, yan gezinme çubuğu ana öğesine göre konumlandırılacaktır (ana öğeye position: relative stilini kendiniz eklemelisiniz).
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail> bileşeninde placement özniteliğini right olarak ayarlayarak, yan gezinme çubuğunu sağ tarafta görüntüleyebilirsiniz.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail> bileşenine divider özniteliğini ekleyerek, yan gezinme çubuğu ile sayfa içeriği arasında bir ayırıcı çizgi görüntüleyebilirsiniz.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail> bileşeni içinde top ve bottom slot'ları aracılığıyla üst ve alt kısma öğeler ekleyebilirsiniz.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail> bileşeninin alignment özniteliğini ayarlayarak, gezinme öğelerinin dikey hizalama şeklini değiştirebilirsiniz.
Son
Resimler
Kitaplık
başlangıç
orta
son
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">başlangıç</mdui-segmented-button>
<mdui-segmented-button value="center">orta</mdui-segmented-button>
<mdui-segmented-button value="end">son</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Kaynak Kodu
<mdui-navigation-rail-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.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Kitaplık
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail-item> bileşeni, metin eklenmeden yalnızca simge kullanabilir.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail-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.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Son</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu
<mdui-navigation-rail-item> bileşeninde, badge slot'u aracılığıyla rozet ekleyebilirsiniz.
Son
99+
Resimler
Kitaplık
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Son
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Resimler</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Kitaplık</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Sayfa içeriği</div>
</div>
</div>
Kaynak Kodu| Öznitelik | Özellik | Reflect | 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ğilhelp: İlgili yardım belgesine bağlantılicense: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadırme: Mevcut belge, bağlantı içeriğinin sahibini temsil edernext: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedirnofollow: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaznoreferrer: Referer başlığını içermez. noopener etkisine benzeropener: 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ştururprev: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedirsearch: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlartag: 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.
|
| Öznitelik | Özellik | Reflect | Tür | Varsayılan |
|---|
value | value | | string | - |
Şu anda seçili olan <mdui-navigation-rail-item> değeri.
|
placement | placement | | 'left' | 'right' | 'left' |
Gezinme rayının konumu. Olası değerler:
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
<mdui-navigation-rail-item> öğelerinin hizalama şekli. Olası değerler:
start: Üste hizalıcenter: Ortaya hizalıend: Alta hizalı
|
contained | contained | | boolean | false |
Varsayılan olarak, gezinme rayı body öğesine göre görüntülenir. Bu özellik true olarak ayarlandığında, gezinme rayı üst öğesine göre görüntülenir.
Not: Bu özellik ayarlanırken, üst öğede manuel olarak position: relative; stili ayarlanmalıdır.
|
divider | divider | | boolean | false |
Gezinme rayı ile sayfa içeriği arasına ayırıcı çizgi eklenip eklenmeyeceği.
|
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.
|
| Ad |
|---|
top |
Üst öğelerin kabı.
|
bottom |
Alt öğelerin kabı.
|
items |
<mdui-navigation-rail-item> bileşenlerinin kabı.
|
Önceki Bölüm
NavigationDrawer Gezinme Çekmecesi
Sonraki Bölüm
Radio Radyo Butonu
