TopAppBarÜst Uygulama Çubuğu

Üst uygulama çubuğu, sayfanın üst kısmında temel bilgileri ve ilgili işlemleri görüntülemek için kullanılır. Kullanıcıya net bir gezinme ve işlevlere kolay erişim sağlar.

Kullanım Şekli

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

import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';

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

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.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.)

Başlık

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-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-top 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-top stili, scroll-target öğesine eklenir.
<mdui-layout></mdui-layout> bileşeninin içinde bulunduğunda. Bu durumda padding-top stili eklenmez.

Örnekler

Belirtilen Konteynır İçinde

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

Üst uygulama çubuğunu belirli bir konteynırın içine yerleştirmek istiyorsanız, <mdui-top-app-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, üst uygulama çubuğu ana öğeye göre konumlandırılacaktır (ana öğeye position: relative; overflow: hidden stillerini kendiniz eklemelisiniz).

Başlık

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

Kaynak Kodu

Şekil

<mdui-top-app-bar> bileşeninde variant özniteliğini kullanarak üst uygulama çubuğunun şeklini ayarlayabilirsiniz.

Başlık

ortalanmış

küçük

orta

büyük

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-variant" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">
      <mdui-segmented-button-group selects="single" value="small">
        <mdui-segmented-button value="center-aligned">ortalanmış</mdui-segmented-button>
        <mdui-segmented-button value="small">küçük</mdui-segmented-button>
        <mdui-segmented-button value="medium">orta</mdui-segmented-button>
        <mdui-segmented-button value="large">büyük</mdui-segmented-button>
      </mdui-segmented-button-group>
    </div>
  </div>
</div>

<script>
  const topAppBar = document.querySelector(".example-variant-bar");
  const segmentedButtonGroup = document.querySelector(".example-variant");

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

Kaynak Kodu

Sayfa Kaydırma Sırasındaki Davranış

<mdui-top-app-bar> bileşeninde scroll-behavior özniteliğini ayarlayarak, sayfa kaydırıldığında üst uygulama çubuğunun davranışını tanımlayabilirsiniz. Birden fazla davranışı boşlukla ayırarak aynı anda ayarlayabilirsiniz.

Kaydırma davranışları şunları içerir:

hide: Sayfa aşağı kaydırıldığında üst uygulama çubuğunu gizler, yukarı kaydırıldığında gösterir.
shrink: Yalnızca variant özniteliği medium veya large olduğunda etkilidir. Sayfa aşağı kaydırıldığında üst uygulama çubuğunu daraltır, yukarı kaydırıldığında genişletir.
elevate: Sayfa aşağı kaydırıldığında üst uygulama çubuğuna gölge ekler; sayfa en üste kaydırıldığında gölgeyi kaldırır.

Üst uygulama çubuğunun kaydırma davranışlarının kaç piksel kaydırmadan sonra başlayacağını ayarlamak için scroll-threshold özniteliğini kullanın. (Not: Anında tepki vermesi için elevate kaydırma davranışını kullanırken scroll-threshold özniteliğini ayarlamamanız önerilir.)

Örnek: Kaydırma sırasında gizleme

Başlık

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-hide"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Kaynak Kodu

Örnek: Kaydırma sırasında gölge ekleme

Başlık

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="elevate"
    scroll-target=".example-scroll-behavior-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Kaynak Kodu

Örnek: Kaydırma sırasında daraltma

Başlık

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-shrink"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Kaynak Kodu

Örnek: Kaydırma sırasında daraltma ve gölge ekleme

Başlık

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-scroll-behavior-shrink-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Kaynak Kodu

Genişletilmiş Durum Metni

variant özniteliği medium veya large olan ve scroll-behavior özniteliği shrink olan üst uygulama çubukları için, <mdui-top-app-bar-title> bileşeninde label-large slot'unu kullanarak genişletilmiş durumdaki metni ayarlayabilirsiniz.

Daraltılmış durum başlığı Genişletilmiş durum başlığı

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-label-large-slot"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>
      Daraltılmış durum başlığı
      <span slot="label-large">Genişletilmiş durum başlığı</span>
    </mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-label-large-slot" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Kaynak Kodu

`mdui-top-app-bar-title` API

Slots

Ad
Varsayılan
Üst uygulama çubuğunun başlık metni.
`label-large`
Genişletilmiş durumdaki başlık metni.

CSS Parts

Ad
`label`
Başlık metni.
`label-large`
Genişletilmiş durumdaki başlık metni.

`mdui-top-app-bar` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Üst uygulama çubuğunun şekli. Varsayılan `small`'dır. Olası değerler: `center-aligned`: Küçük uygulama çubuğu, başlık ortalanmış `small`: Küçük uygulama çubuğu `medium`: Orta boy uygulama çubuğu `large`: Büyük uygulama çubuğu
`hide`	`hide`	`boolean`	`false`
Gizlenip gizlenmeyeceği.
`shrink`	`shrink`	`boolean`	`false`
Yalnızca `variant="medium"` veya `variant="large"` olduğunda geçerlidir. `variant="small"` stiline küçültülüp küçültülmeyeceği.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Kaydırma davranışı. Birden fazla değer boşlukla ayrılarak aynı anda kullanılabilir. Olası değerler: `hide`: Kaydırma sırasında gizlenir `shrink`: Orta ve büyük uygulama çubuklarında kullanılabilir, kaydırma sırasında küçük uygulama çubuğu stiline küçülür `elevate`: Kaydırma sırasında gölge eklenir
`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
Üst 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

Tooltip Tooltip

Sonraki Bölüm

jq Araç Kütüphanesi