TopAppBarFelső alkalmazássáv

A felső alkalmazássáv kulcsfontosságú információk és kapcsolódó műveletek megjelenítésére szolgál az oldal tetején, tiszta navigációt és kényelmes funkcióhozzáférést biztosítva a felhasználók számára.

Használat

A komponensek importálása:

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

A komponensek TypeScript-típusainak importálása:

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

Példa: (A példában szereplő style="position: relative" csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.)

Cím

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

Figyelmeztetések:

A komponens alapértelmezés szerint position: fixed pozicionálást használ, és automatikusan padding-top stílust ad a body elemhez, hogy a tartalmat ne takarja el ez a komponens.

Viszont a következő két esetben alapértelmezés szerint position: absolute pozicionálást használ:

Ha meg van adva a scroll-target attribútum. Ekkor a padding-top stílust a scroll-target elemre kell alkalmaznia.
Ha a <mdui-layout></mdui-layout> komponensen belül található. Ekkor nem ad hozzá padding-top stílust.

Példák

Megadott tárolóban való megjelenítés

Alapértelmezés szerint a felső alkalmazássáv az oldal tetején jelenik meg.

Ha azt szeretné, hogy a felső alkalmazássáv egy megadott tárolóban jelenjen meg, adja meg a scroll-target attribútumot a <mdui-top-app-bar> komponensen. Az attribútum értéke a görgethető tartalom tárolójának CSS szelektora vagy DOM eleme. Ekkor a felső alkalmazássáv a szülőelemhez igazodva jelenik meg (a szülőelemen Önnek kell beállítania a position: relative; overflow: hidden stílust).

Cím

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

Forrás

Változat

A <mdui-top-app-bar> komponensen a variant attribútummal állíthatja be a felső alkalmazássáv változatát.

Cím

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>Cím</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>

Forrás

Viselkedés görgetéskor

A <mdui-top-app-bar> komponensen a scroll-behavior attribútummal meghatározhatja a felső alkalmazássáv viselkedését az oldal görgetésekor. Több viselkedést is beállíthat egyszerre, szóközzel elválasztva.

A görgetési viselkedések a következők:

hide: Az oldal lefelé görgetésekor elrejti a felső alkalmazássávot, felfelé görgetésekor megjeleníti.
shrink: Csak akkor érvényes, ha a variant attribútum értéke medium vagy large. Az oldal lefelé görgetésekor kibontja a felső alkalmazássávot, felfelé görgetésekor összehúzza.
elevate: Az oldal lefelé görgetésekor árnyékot ad a felső alkalmazássávnak; amikor az oldal visszagörget a tetejére, eltávolítja az árnyékot.

A scroll-threshold attribútummal beállíthatja, hogy hány pixel görgetése után lépjen életbe a felső alkalmazássáv görgetési viselkedése. (Figyelem: a gyors reagálás érdekében, ha az elevate görgetési viselkedést használja, ne állítsa be a scroll-threshold attribútumot.)

Példa: Elrejtés görgetéskor

Cím

<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>Cím</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>

Forrás

Példa: Árnyék hozzáadása görgetéskor

Cím

<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>Cím</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>

Forrás

Példa: Összehúzódás görgetéskor

Cím

<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>Cím</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>

Forrás

Példa: Összehúzódás és árnyék hozzáadása görgetéskor

Cím

<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>Cím</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>

Forrás

Kibontott állapot szövege

Azoknál a felső alkalmazássávoknál, amelyeknél a variant attribútum értéke medium vagy large, és a scroll-behavior attribútum értéke shrink, a <mdui-top-app-bar-title> komponensben a label-large slotban beállíthatja a kibontott állapot szövegét.

Ez az összehúzott állapot címe Ez a kibontott állapot címe

<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>
      Ez az összehúzott állapot címe
      <span slot="label-large">Ez a kibontott állapot címe</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>

Forrás

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

Slots

Név
(alapértelmezett)
A felső alkalmazássáv címszövege.
`label-large`
A kibontott állapot címszövege.

CSS Parts

Név
`label`
Címszöveg.
`label-large`
A kibontott állapot címszövege.

`mdui-top-app-bar` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
A felső alkalmazássáv variánsa. Alapértelmezés szerint `small`. Lehetséges értékek: `center-aligned`: Kis méretű alkalmazássáv, középre igazított címmel `small`: Kis méretű alkalmazássáv `medium`: Közepes méretű alkalmazássáv `large`: Nagy méretű alkalmazássáv
`hide`	`hide`	`boolean`	`false`
Rejtett állapotban van-e.
`shrink`	`shrink`	`boolean`	`false`
Összezsugorodik-e a `variant="small"` stílusára, csak akkor érvényes, ha a `variant="medium"` vagy `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Görgetési viselkedés. Több érték is használható egyszerre, szóközzel elválasztva. Lehetséges értékek: `hide`: Elrejtés görgetéskor `shrink`: Közepes vagy nagy alkalmazássávokban használható, görgetéskor kis alkalmazássáv stílusára zsugorodik `elevate`: Árnyék hozzáadása görgetéskor
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Az elem, amelynek a görgetési eseményeit figyelni kell. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a `window` görgetési eseményeit figyeli.
`scroll-threshold`	`scrollThreshold`	`number`	-
A görgetési művelet kiváltásához szükséges küszöbérték `px`-ben.
`order`	`order`	`number`	-
A komponens sorrendje a `<mdui-layout>` elemen belül, növekvő sorrendben. Alapértelmezett érték: `0`.

Események

Név
`show`
A megjelenítés kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a megjelenítés.
`shown`
A megjelenítési animáció befejezésekor aktiválódik az esemény.
`hide`
Az elrejtés kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható az elrejtés.
`hidden`
Az elrejtési animáció befejezésekor aktiválódik az esemény.

Slots

Név
(alapértelmezett)
A felső alkalmazássávon belüli elemek.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

Tooltip Tooltip

Következő fejezet

jq könyvtár