SnackbarSnackbar
A Snackbar rövid állapotüzenetek megjelenítésére szolgál az oldalon.
A komponens közvetlen használata mellett az mdui egy mdui.snackbar függvényt is biztosít, amely leegyszerűsíti a Snackbar komponens használatát.
A komponens importálása:
import 'mdui/components/snackbar.js';
A komponens TypeScript-típusának importálása:
import type { Snackbar } from 'mdui/components/snackbar.js';
Példa:
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar class="example-snackbar">Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
A placement attribútummal beállíthatja a Snackbar megjelenési pozícióját.
Fotó archiválva
top-start
Fotó archiválva
top
Fotó archiválva
top-end
Fotó archiválva
bottom-start
Fotó archiválva
bottom
Fotó archiválva
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Fotó archiválva</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
Forrás
Az action attribútummal műveleti gombot adhat a Snackbar jobb oldalához, és az attribútummal adhatja meg a gomb szövegét. A műveleti gombra kattintva az action-click esemény aktiválódik. Ha azt szeretné, hogy a műveleti gomb betöltési állapotot mutasson, adja hozzá az action-loading attribútumot.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar action="Visszavonás" class="example-action">Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</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>
ForrásAz action slot használatával egyéni elemet is hozzáadhat a Snackbar jobb oldalához.
Fotó archiválva
Visszavonás
Snackbar megnyitása
<mdui-snackbar class="example-action-slot">
Fotó archiválva
<mdui-button slot="action" variant="text">Visszavonás</mdui-button>
</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Forrás
A closeable attribútummal bezárás gomb jelenik meg a Snackbar jobb oldalán. A gombra kattintva a Snackbar bezáródik, és a close esemény aktiválódik.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar closeable class="example-closeable">Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
ForrásA close-button slot használatával testreszabhatja a bezárás gomb elemét.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar closeable class="example-close-button-slot">
Fotó archiválva
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
ForrásA close-icon attribútummal módosíthatja az alapértelmezett bezárás gomb Material Icons ikonját. A close-icon slot használatával testreszabhatja a bezárás gomb ikonjának elemét.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Forrás
Alapértelmezés szerint az üzenetszövegnek nincs sorkorlátozása. A message-line attribútummal korlátozhatja a szövegsorok számát, legfeljebb 2 sorig.
Az elem már tartalmazza a „travel” címkét. Hozzáadhat egy új címkét. Hozzáadhat egy új címkét.
Snackbar megnyitása
<mdui-snackbar message-line="1" class="example-line">Az elem már tartalmazza a „travel” címkét. Hozzáadhat egy új címkét. Hozzáadhat egy új címkét.</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Forrás
Az auto-close-delay attribútummal beállíthatja az automatikus bezárás késleltetését ezredmásodpercben. Az alapértelmezett érték 5000 ezredmásodperc.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Forrás
A close-on-outside-click attribútum hozzáadásával beállíthatja, hogy a Snackbar a Snackbar-on kívüli területre kattintva bezáródjon.
Fotó archiválva
Snackbar megnyitása
<mdui-snackbar close-on-outside-click class="example-outside">Fotó archiválva</mdui-snackbar>
<mdui-button>Snackbar megnyitása</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Forrás| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
open | open | | boolean | false |
A Snackbar látható-e.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
A Snackbar megjelenési helye. Alapértelmezés szerint bottom. Lehetséges értékek:
top: Felül, középre igazítvatop-start: Felül, balra igazítvatop-end: Felül, jobbra igazítvabottom: Alul, középre igazítvabottom-start: Alul, balra igazítvabottom-end: Alul, jobbra igazítva
|
action | action | | string | - |
A műveleti gomb szövege. A műveleti gomb beállítható a slot="action" segítségével is.
|
action-loading | actionLoading | | boolean | false |
A műveleti gomb betöltési állapotban van-e.
|
closeable | closeable | | boolean | false |
Megjelenjen-e a jobb oldalon egy bezárás gomb.
|
close-icon | closeIcon | | string | - |
A bezárás gomb Material Icons ikonjának neve. Beállítható a slot="close-icon" segítségével is.
|
message-line | messageLine | | 1 | 2 | - |
Az üzenet szövegének maximális megjelenítési sorainak száma. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek:
1: Legfeljebb egy sor2: Legfeljebb két sor
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Az automatikus bezárás késleltetése (ezredmásodpercben). 0 értékre állítva nem záródik be automatikusan. Alapértelmezés szerint 5000 ezredmásodperc.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
A Snackbar területén kívülre kattintva vagy érintve bezáródik-e a Snackbar.
|
| Név |
|---|
open |
A Snackbar megjelenítésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a Snackbar megjelenítése.
|
opened |
A Snackbar megjelenítési animációjának befejezésekor aktiválódik az esemény.
|
close |
A Snackbar elrejtésének kezdetekor aktiválódik az esemény. Az event.preventDefault() meghívásával megakadályozható a Snackbar bezárása.
|
closed |
A Snackbar elrejtési animációjának befejezésekor aktiválódik az esemény.
|
action-click |
A műveleti gombra kattintáskor aktiválódik.
|
| Név |
|---|
| (alapértelmezett) |
A Snackbar üzenet szöveges tartalma.
|
action |
A jobb oldali műveleti gomb.
|
close-button |
A jobb oldali bezárás gomb. Csak akkor jelenik meg, ha a closeable attribútum true-ra van állítva.
|
close-icon |
A bezárás gombban lévő ikon.
|
Előző fejezet
Slider Csúszka
Következő fejezet
Switch Kapcsoló
