TopAppBarBarra de aplicativo superior

Horní aplikační lišta zobrazuje klíčové informace a související akce nahoře na stránce, aby byly navigace i funkce po ruce.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Příklad použití: (style="position: relative" v příkladu je jen pro ukázku, při skutečném použití tento styl odstraňte.)

Název

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

Upozornění:

Ve výchozím nastavení používá position: fixed a automaticky přidá padding-top na body, aby nedošlo k zakrytí obsahu stránky touto komponentou.

V těchto dvou případech se však používá position: absolute:

Když je zadán atribut scroll-target. Pak se padding-top přidá na prvek scroll-target.
Když se komponenta nachází uvnitř <mdui-layout></mdui-layout>. Pak se padding-top nepřidává.

Příklady

Umístění v určeném kontejneru

Ve výchozím nastavení se horní aplikační lišta zobrazuje nahoře na stránce.

Pokud chcete umístit horní aplikační lištu do určeného kontejneru, můžete na komponentě <mdui-top-app-bar> zadat atribut scroll-target, jehož hodnotou je CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. Pak se horní aplikační lišta zobrazí relativně k nadřazenému prvku (styl position: relative; overflow: hidden je nutné na nadřazený prvek přidat ručně).

Název

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

Fonte

Tvar

Pomocí atributu variant na komponentě <mdui-top-app-bar> můžete nastavit tvar horní aplikační lišty.

Název

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>Název</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>

Fonte

Chování při rolování stránky

Nastavením atributu scroll-behavior na komponentě <mdui-top-app-bar> můžete definovat chování horní aplikační lišty při rolování stránky. Můžete nastavit více chování najednou, oddělených mezerami.

Možnosti chování při rolování zahrnují:

hide: Skryje horní aplikační lištu při rolování stránky dolů a zobrazí ji při rolování nahoru.
shrink: Platí pouze když je atribut variant nastaven na medium nebo large. Při rolování stránky dolů se horní aplikační lišta roztáhne, při rolování nahoru se smrští.
elevate: Při rolování stránky dolů přidá na horní aplikační lištu stín; při rolování zpět na začátek stín odstraní.

Pomocí atributu scroll-threshold můžete nastavit, po kolika pixelech rolování se mají spustit chování horní aplikační lišty při rolování. (Upozorňujeme, že pro včasnou odezvu byste při použití chování elevate neměli nastavovat atribut scroll-threshold.)

Příklad: Skrytí při rolování

Název

<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>Název</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>

Fonte

Příklad: Přidání stínu při rolování

Název

<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>Název</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>

Fonte

Příklad: Smrštění při rolování

Název

<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>Název</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>

Fonte

Příklad: Smrštění a přidání stínu při rolování

Název

<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>Název</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>

Fonte

Text v rozbaleném stavu

U horní aplikační lišty s atributem variant nastaveným na medium nebo large a atributem scroll-behavior nastaveným na shrink můžete do komponenty <mdui-top-app-bar-title> přidat slot label-large pro nastavení textu v rozbaleném stavu.

Toto je název ve sbaleném stavu Toto je název v rozbaleném stavu

<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>
      Toto je název ve sbaleném stavu
      <span slot="label-large">Toto je název v rozbaleném stavu</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>

Fonte

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

Slots

Nome
(padrão)
Text nadpisu horní aplikační lišty.
`label-large`
Text nadpisu v rozbaleném stavu.

CSS Parts

Nome
`label`
Text nadpisu.
`label-large`
Text nadpisu v rozbaleném stavu.

`mdui-top-app-bar` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Varianta horní aplikační lišty. Výchozí je `small`. Možné hodnoty: `center-aligned`: Malá aplikační lišta, nadpis na střed. `small`: Malá aplikační lišta. `medium`: Střední aplikační lišta. `large`: Velká aplikační lišta.
`hide`	`hide`	`boolean`	`false`
Určuje, zda je lišta skrytá.
`shrink`	`shrink`	`boolean`	`false`
Určuje, zda se má lišta zmenšit na styl `variant="small"`. Platí pouze pokud je `variant="medium"` nebo `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Chování při posouvání. Lze použít více hodnot oddělených mezerami. Možné hodnoty: `hide`: Při posouvání se lišta skryje. `shrink`: Lze použít u střední a velké aplikační lišty, při posouvání se zmenší na styl malé lišty. `elevate`: Při posouvání se přidá stín.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je `window` (okno).
`scroll-threshold`	`scrollThreshold`	`number`	-
Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
`order`	`order`	`number`	-
Pořadí této komponenty v rámci rozvržení `<mdui-layout>`. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je `0`.

Eventos

Nome
`show`
Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním `event.preventDefault()`.
`shown`
Spustí se po dokončení animace zobrazení.
`hide`
Spustí se na začátku skrývání. Skrytí lze zabránit voláním `event.preventDefault()`.
`hidden`
Spustí se po dokončení animace skrytí.

Slots

Nome
(padrão)
Prvky uvnitř horní aplikační lišty.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Capítulo anterior

Tooltip Tooltip

Próximo capítulo

Biblioteca de utilitários jq