BottomAppBarAlsó alkalmazássáv

Az alsó alkalmazássáv elsősorban mobil nézetben szolgál navigációs elemek és egyéb fontos műveletek megjelenítésére az oldal alján.

Használat

A komponens importálása:

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

A komponens TypeScript-típusának importálása:

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

Példa: (Figyelem: 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.)

<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>

Figyelmeztetések:

A komponens alapértelmezés szerint position: fixed pozicionálást használ, és automatikusan padding-bottom 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-bottom stílust a scroll-target elemre kell alkalmazni.
Ha a <mdui-layout></mdui-layout> komponensen belül található. Ekkor nem ad hozzá padding-bottom stílust.

Példák

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

Alapértelmezés szerint az alsó alkalmazássáv az oldal alján jelenik meg.

Ha azt szeretné, hogy az alsó alkalmazássáv egy megadott tárolóban jelenjen meg, adja meg a scroll-target attribútumot, amelynek értéke a görgethető tartalom tárolójának CSS-szelektora vagy DOM-eleme. Ekkor az alsó alkalmazássáv a szülőelemhez igazodva jelenik meg (a szülőelemen be kell állítani a position: relative; overflow: hidden stílust).

Tartalom

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

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

Forrás

Görgetéskor történő elrejtés

A scroll-behavior attribútum hide értékre állításával az alsó alkalmazássáv az oldal lefelé görgetésekor elrejtődik, felfelé görgetésekor pedig megjelenik.

A scroll-threshold attribútummal beállíthatja, hogy hány pixel görgetése után kezdődjön el az alsó alkalmazássáv elrejtése.

Tartalom

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

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

Forrás

Rögzített lebegő műveletgomb

Ha az alsó alkalmazássáv lebegő műveletgombot tartalmaz, akkor hozzáadhatja a fab-detach attribútumot, amelynek hatására az oldal görgetésekor, amikor az alsó alkalmazássáv elrejtődik, a lebegő műveletgomb továbbra is az oldal jobb alsó sarkában marad.

<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>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`hide`	`hide`	`boolean`	`false`
Rejtett állapotban van-e.
`fab-detach`	`fabDetach`	`boolean`	`false`
Az alsó alkalmazássávban lévő `<mdui-fab>` komponens leváljon-e az alkalmazássávról. Ha `true`, akkor az alkalmazássáv elrejtése után a `<mdui-fab>` továbbra is látható marad az oldalon.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Görgetési viselkedés. Lehetséges értékek: `hide`: Elrejtés 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)
Az alsó 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

Badge Badge

Következő fejezet

Button Gomb