BottomAppBarAlt Uygulama Çubuğu

Alt uygulama çubuğu, öncelikle mobil cihazlarda sayfa alt kısmında gezinme öğelerini ve diğer önemli işlemleri görüntülemek için kullanılır.

Kullanım Şekli

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

import 'mdui/components/bottom-app-bar.js';

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

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

Kullanım örneği: (Örnekteki style="position: relative" ifadesinin yalnızca gösterim amacıyla olduğunu, gerçek kullanımda bu stili kaldırmanız gerektiğini unutmayın.)

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-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.
<mdui-layout></mdui-layout> bileşeninin içinde bulunduğunda. Bu durumda padding-bottom stili eklenmez.

Örnekler

Belirtilen Konteynır İçinde

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

Alt uygulama çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, scroll-target özniteliğini kullanabilirsiniz. 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, alt uygulama çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye position: relative; overflow: hidden stillerini kendiniz eklemelisiniz).

İçerik

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">İçerik</mdui-bottom-app-bar>

  <div class="example-scroll-target" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Kaynak Kodu

Kaydırma Sırasında Gizleme

scroll-behavior özniteliğini hide olarak ayarlamak, sayfa aşağı kaydırıldığında alt uygulama çubuğunu gizleyecek ve yukarı kaydırıldığında tekrar gösterecektir.

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

İçerik

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >İçerik</mdui-bottom-app-bar>

  <div class="example-scroll-behavior" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Kaynak Kodu

Sabit Yüzen İşlem Butonu

Alt uygulama çubuğu bir yüzen işlem butonu (FAB) içeriyorsa, fab-detach özniteliğini ekleyebilirsiniz. Bu sayede sayfa kaydırıldığında ve alt uygulama çubuğu gizlendiğinde, yüzen işlem butonu sayfanın sağ alt köşesinde kalmaya devam eder.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`hide`	`hide`	`boolean`	`false`
Gizlenip gizlenmeyeceği.
`fab-detach`	`fabDetach`	`boolean`	`false`
Alt uygulama çubuğundaki `<mdui-fab>` bileşeninin uygulama çubuğundan ayrılıp ayrılmayacağı. `true` ise, uygulama çubuğu gizlendikten sonra `<mdui-fab>` sayfada kalmaya devam eder.
`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.

Olaylar

Ad
`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.

Slots

Ad
Varsayılan
Alt uygulama çubuğunun içindeki öğeler.

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

Badge Rozet

Sonraki Bölüm

Button Buton