TopAppBarGórny pasek aplikacji

Górny pasek aplikacji wyświetla kluczowe informacje i powiązane działania na górze strony, zapewniając użytkownikowi wyraźną nawigację i łatwy dostęp do funkcji.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';

Przykład użycia: (Uwaga: style="position: relative" w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.)

Tytuł

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Tytuł</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>

Uwagi:

Ten komponent domyślnie używa pozycjonowania position: fixed i automatycznie dodaje styl padding-top do body, aby zapobiec zasłanianiu treści strony przez komponent.

Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie position: absolute:

Gdy określony jest atrybut scroll-target, styl padding-top jest dodawany do elementu scroll-target.
Gdy komponent znajduje się wewnątrz komponentu <mdui-layout></mdui-layout>. Wtedy styl padding-top nie jest dodawany.

Przykłady

Umieszczenie w określonym kontenerze

Domyślnie górny pasek aplikacji jest wyświetlany na górze strony względem bieżącego okna.

Jeśli chcesz umieścić górny pasek aplikacji w określonym kontenerze, możesz określić atrybut scroll-target na komponencie <mdui-top-app-bar>. Wartością atrybutu powinien być selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku górny pasek aplikacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style position: relative; overflow: hidden).

Tytuł

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Tytuł</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>

Źródło

Kształt

Możesz ustawić kształt górnego paska aplikacji za pomocą atrybutu variant na komponencie <mdui-top-app-bar>.

Tytuł

center-aligned

small

medium

large

<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>Tytuł</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">center-aligned</mdui-segmented-button>
        <mdui-segmented-button value="small">small</mdui-segmented-button>
        <mdui-segmented-button value="medium">medium</mdui-segmented-button>
        <mdui-segmented-button value="large">large</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>

Źródło

Zachowanie podczas przewijania strony

Ustawiając atrybut scroll-behavior na komponencie <mdui-top-app-bar>, możesz zdefiniować zachowanie górnego paska aplikacji podczas przewijania strony. Można ustawić wiele zachowań jednocześnie, oddzielając je spacjami.

Zachowania podczas przewijania obejmują:

hide: Ukrywa górny pasek aplikacji podczas przewijania w dół i pokazuje go podczas przewijania w górę.
shrink: Działa tylko wtedy, gdy atrybut variant ma wartość medium lub large. Rozwija górny pasek aplikacji podczas przewijania w dół i zwęża go podczas przewijania w górę.
elevate: Dodaje cień do górnego paska aplikacji podczas przewijania w dół; usuwa cień, gdy strona wróci do góry.

Atrybut scroll-threshold ustawia, po przewinięciu ilu pikseli zaczynają być wyzwalane zachowania górnego paska aplikacji. (Uwaga: Aby zapewnić szybką reakcję, w przypadku używania zachowania elevate nie należy ustawiać atrybutu scroll-threshold.)

Przykład: Ukrywanie podczas przewijania

Tytuł

<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>Tytuł</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>

Źródło

Przykład: Dodawanie cienia podczas przewijania

Tytuł

<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>Tytuł</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>

Źródło

Przykład: Zwężanie podczas przewijania

Tytuł

<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>Tytuł</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>

Źródło

Przykład: Zwężanie i dodawanie cienia podczas przewijania

Tytuł

<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>Tytuł</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>

Źródło

Tekst w stanie rozwiniętym

Dla górnego paska aplikacji z atrybutem variant ustawionym na medium lub large oraz atrybutem scroll-behavior zawierającym shrink, możesz ustawić tekst w stanie rozwiniętym za pomocą slotu label-large w komponencie <mdui-top-app-bar-title>.

To jest tytuł w stanie zwiniętym To jest tytuł w stanie rozwiniętym

<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>
      To jest tytuł w stanie zwiniętym
      <span slot="label-large">To jest tytuł w stanie rozwiniętym</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>

Źródło

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

Slots

Nazwa
(domyślny)
Tekst tytułu górnego paska aplikacji
`label-large`
Tekst tytułu w stanie rozwiniętym

CSS Parts

Nazwa
`label`
Tekst tytułu
`label-large`
Tekst tytułu w stanie rozwiniętym

`mdui-top-app-bar` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Wariant górnego paska aplikacji. Domyślnie `small`. Dozwolone wartości: `center-aligned`: Mały pasek aplikacji, tytuł wyśrodkowany `small`: Mały pasek aplikacji `medium`: Średni pasek aplikacji `large`: Duży pasek aplikacji
`hide`	`hide`	`boolean`	`false`
Określa, czy pasek aplikacji jest ukryty.
`shrink`	`shrink`	`boolean`	`false`
Określa, czy zmniejszyć do stylu `variant="small"`. Działa tylko wtedy, gdy `variant="medium"` lub `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Zachowanie podczas przewijania. Można używać wielu wartości jednocześnie, oddzielając je spacjami. Dozwolone wartości: `hide`: Ukrywanie podczas przewijania `shrink`: Zmniejszanie do małego paska aplikacji podczas przewijania (dotyczy wariantu średniego i dużego) `elevate`: Dodawanie cienia podczas przewijania
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (`window`).
`scroll-threshold`	`scrollThreshold`	`number`	-
Odległość przewinięcia w `px` wymagana do aktywacji zachowania przewijania.
`order`	`order`	`number`	-
Kolejność tego komponentu w układzie `<mdui-layout>`, sortowana od najmniejszej do największej. Domyślnie `0`.

Zdarzenia

Nazwa
`show`
Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując `event.preventDefault()`
`shown`
Wywoływane po zakończeniu animacji wyświetlania
`hide`
Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując `event.preventDefault()`
`hidden`
Wywoływane po zakończeniu animacji ukrywania

Slots

Nazwa
(domyślny)
Elementy wewnątrz górnego paska aplikacji

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

Tooltip Tooltip

Następny rozdział

Biblioteka narzędziowa jq