SnackbarSnackbar

Snackbar slouží ke stručnému zobrazení informací o dění v aplikaci.

Kromě přímého použití této komponenty poskytuje mdui také funkci mdui.snackbar pro zjednodušení použití komponenty Snackbar.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/snackbar.js';

Importujte TypeScript typy komponenty podle potřeby:

import type { Snackbar } from 'mdui/components/snackbar.js';

Příklad použití:

Foto archivováno

Otevřít Snackbar

<mdui-snackbar class="example-snackbar">Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Můžete použít atribut action k přidání akčního tlačítka na pravou stranu Snackbaru a určit text tlačítka. Kliknutí na akční tlačítko spustí událost action-click. Pokud chcete, aby se akční tlačítko zobrazovalo ve stavu načítání, můžete přidat atribut action-loading.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar action="Zpět" class="example-action">Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action");
  const openButton = snackbar.nextElementSibling;

  snackbar.addEventListener("action-click", () => {
    snackbar.actionLoading = true;
    setTimeout(() => snackbar.actionLoading = false, 2000);
  });

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Lze také přidat vlastní prvek na pravou stranu Snackbaru pomocí slotu action.

Foto archivováno Zpět

Otevřít Snackbar

<mdui-snackbar class="example-action-slot">
  Foto archivováno
  <mdui-button slot="action" variant="text">Zpět</mdui-button>
</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Zavíratelné

Po přidání atributu closeable se na pravé straně Snackbaru zobrazí tlačítko zavření. Kliknutím na toto tlačítko se Snackbar zavře a spustí se událost close.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar closeable class="example-closeable">Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-closeable");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Můžete přizpůsobit prvek tlačítka zavření pomocí slotu close-button.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar closeable class="example-close-button-slot">
  Foto archivováno
  <mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-button-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Nastavením atributu close-icon můžete změnit ikonu Material Icons ve výchozím tlačítku zavření. Lze také přizpůsobit prvek ikony v tlačítku zavření pomocí slotu close-icon.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar
  closeable
  close-icon="delete"
  class="example-close-icon"
>Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-icon");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Počet řádků textu

Ve výchozím nastavení není počet řádků zprávy omezen. Počet řádků textu můžete omezit pomocí atributu message-line, maximálně na 2 řádky.

Položka již má štítek "cestování". Můžete přidat nový štítek. Můžete přidat nový štítek.

Otevřít Snackbar

<mdui-snackbar message-line="1" class="example-line">Položka již má štítek "cestování". Můžete přidat nový štítek. Můžete přidat nový štítek.</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-line");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Zpoždění automatického zavření

Pomocí atributu auto-close-delay můžete nastavit zpoždění automatického zavření v milisekundách. Výchozí hodnota je 5000 milisekund.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-delay");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

Zavření kliknutím na vnější oblast

Přidáním atributu close-on-outside-click můžete nastavit zavření Snackbaru při kliknutí na oblast mimo Snackbar.

Foto archivováno

Otevřít Snackbar

<mdui-snackbar close-on-outside-click class="example-outside">Foto archivováno</mdui-snackbar>

<mdui-button>Otevřít Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-outside");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`open`	`open`	`boolean`	`false`
Určuje, zda se má Snackbar zobrazit.
`placement`	`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`'bottom'`
Umístění Snackbaru. Výchozí je `bottom`. Možné hodnoty: `top`: Nahoře uprostřed. `top-start`: Nahoře vlevo. `top-end`: Nahoře vpravo. `bottom`: Dole uprostřed. `bottom-start`: Dole vlevo. `bottom-end`: Dole vpravo.
`action`	`action`	`string`	-
Text akčního tlačítka. Akční tlačítko lze také nastavit pomocí `slot="action"`.
`action-loading`	`actionLoading`	`boolean`	`false`
Určuje, zda je akční tlačítko ve stavu načítání.
`closeable`	`closeable`	`boolean`	`false`
Určuje, zda se má na pravé straně zobrazit tlačítko zavření.
`close-icon`	`closeIcon`	`string`	-
Název ikony z knihovny Material Icons pro tlačítko zavření. Lze také nastavit pomocí `slot="close-icon"`.
`message-line`	`messageLine`	`1 \| 2`	-
Maximální počet řádků pro text zprávy. Ve výchozím nastavení není omezen. Možné hodnoty: `1`: Maximálně jeden řádek, přesahující text bude zkrácen. `2`: Maximálně dva řádky, přesahující text bude zkrácen.
`auto-close-delay`	`autoCloseDelay`	`number`	`5000`
Prodleva automatického zavření (v milisekundách). Nastavením na `0` se automatické zavření vypne. Výchozí hodnota je 5000 ms (5 s).
`close-on-outside-click`	`closeOnOutsideClick`	`boolean`	`false`
Určuje, zda se má Snackbar zavřít při kliknutí nebo dotyku mimo oblast Snackbaru.

Události

Název
`open`
Spustí se na začátku zobrazování Snackbaru. Zobrazení lze zabránit voláním `event.preventDefault()`.
`opened`
Spustí se po dokončení animace zobrazení Snackbaru.
`close`
Spustí se na začátku skrývání Snackbaru. Zavření lze zabránit voláním `event.preventDefault()`.
`closed`
Spustí se po dokončení animace skrytí Snackbaru.
`action-click`
Spustí se při kliknutí na akční tlačítko.

Slots

Název
(výchozí)
Textový obsah zprávy Snackbaru.
`action`
Akční tlačítko na pravé straně.
`close-button`
Tlačítko zavření na pravé straně. Pro zobrazení musí být atribut `closeable` nastaven na `true`.
`close-icon`
Ikona v tlačítku zavření.

CSS Parts

Název
`message`
Text zprávy.
`action`
Akční tlačítko.
`close-button`
Tlačítko zavření.
`close-icon`
Ikona v tlačítku zavření.

CSS Custom Properties

Název
`--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.

Předchozí kapitola

Slider Posuvník

Další kapitola

Switch Spínač