SnackbarSnackbar
Komponent Snackbar wyświetla krótkie informacje o procesie aplikacji na stronie.
Oprócz bezpośredniego używania tego komponentu, mdui udostępnia funkcję mdui.snackbar, która upraszcza korzystanie z komponentu Snackbar.
Zaimportuj komponent:
import 'mdui/components/snackbar.js';
Zaimportuj typ TypeScript komponentu:
import type { Snackbar } from 'mdui/components/snackbar.js';
Przykład użycia:
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar class="example-snackbar">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Atrybut placement ustawia pozycję wyświetlania Snackbara.
Zdjęcie zarchiwizowane
top-start
Zdjęcie zarchiwizowane
top
Zdjęcie zarchiwizowane
top-end
Zdjęcie zarchiwizowane
bottom-start
Zdjęcie zarchiwizowane
bottom
Zdjęcie zarchiwizowane
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Zdjęcie zarchiwizowane</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>
Źródło
Możesz użyć atrybutu action, aby dodać przycisk akcji po prawej stronie Snackbara i określić tekst przycisku za pomocą tego atrybutu. Kliknięcie przycisku akcji wyzwala zdarzenie action-click. Jeśli chcesz, aby przycisk akcji był w stanie ładowania, dodaj atrybut action-loading.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar action="Cofnij" class="example-action">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz 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>
ŹródłoMożesz również dodać niestandardowy element po prawej stronie Snackbara za pomocą slotu action.
Zdjęcie zarchiwizowane
Cofnij
Otwórz Snackbar
<mdui-snackbar class="example-action-slot">
Zdjęcie zarchiwizowane
<mdui-button slot="action" variant="text">Cofnij</mdui-button>
</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Źródło
Dodanie atrybutu closeable powoduje pojawienie się przycisku zamykania po prawej stronie Snackbara. Kliknięcie tego przycisku zamyka Snackbar i wyzwala zdarzenie close.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar closeable class="example-closeable">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
ŹródłoMożesz dostosować element przycisku zamykania za pomocą slotu close-button.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Zdjęcie zarchiwizowane
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
ŹródłoUstawienie atrybutu close-icon pozwala zmienić ikonę Material Icons w domyślnym przycisku zamykania. Możesz również dostosować element ikony przycisku zamykania za pomocą slotu close-icon.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Źródło
Domyślnie tekst wiadomości nie ma ograniczenia liczby wierszy. Możesz ograniczyć liczbę wierszy tekstu za pomocą atrybutu message-line, maksymalnie do 2 wierszy.
Element ma już etykietę „podróż”. Możesz dodać nową etykietę. Możesz dodać nową etykietę.
Otwórz Snackbar
<mdui-snackbar message-line="1" class="example-line">Element ma już etykietę „podróż”. Możesz dodać nową etykietę. Możesz dodać nową etykietę.</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Źródło
Atrybut auto-close-delay ustawia opóźnienie automatycznego zamykania w milisekundach. Domyślnie wynosi 5000 milisekund.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Źródło
Dodanie atrybutu close-on-outside-click umożliwia zamknięcie Snackbara po kliknięciu w obszar poza nim.
Zdjęcie zarchiwizowane
Otwórz Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Zdjęcie zarchiwizowane</mdui-snackbar>
<mdui-button>Otwórz Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Źródło| Atrybut HTML | Właściwość JavaScript | Reflect | Typ | Domyślne |
|---|
open | open | | boolean | false |
Określa, czy Snackbar jest wyświetlany.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Pozycja wyświetlania Snackbara. Domyślnie bottom. Dozwolone wartości:
top: Na górze, wyśrodkowanytop-start: Na górze, wyrównany do lewejtop-end: Na górze, wyrównany do prawejbottom: Na dole, wyśrodkowanybottom-start: Na dole, wyrównany do lewejbottom-end: Na dole, wyrównany do prawej
|
action | action | | string | - |
Tekst przycisku akcji. Można również ustawić przycisk akcji za pomocą slot="action"
|
action-loading | actionLoading | | boolean | false |
Określa, czy przycisk akcji jest w stanie ładowania.
|
closeable | closeable | | boolean | false |
Określa, czy wyświetlać przycisk zamykania po prawej stronie.
|
close-icon | closeIcon | | string | - |
Nazwa ikony Material Icons dla przycisku zamykania. Można również ustawić za pomocą slot="close-icon"
|
message-line | messageLine | | 1 | 2 | - |
Maksymalna liczba wierszy wyświetlanych dla tekstu wiadomości. Domyślnie bez ograniczeń. Dozwolone wartości:
1: Maksymalnie jeden wiersz2: Maksymalnie dwa wiersze
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Opóźnienie automatycznego zamykania (w milisekundach). Ustawienie 0 oznacza brak automatycznego zamykania. Domyślnie 5000 milisekund
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Określa, czy zamknąć Snackbar po kliknięciu lub dotknięciu obszaru poza nim.
|
| Nazwa |
|---|
open |
Wywoływane przed wyświetleniem Snackbara. Można zapobiec wyświetleniu, wywołując event.preventDefault()
|
opened |
Wywoływane po zakończeniu animacji wyświetlania Snackbara
|
close |
Wywoływane przed ukryciem Snackbara. Można zapobiec zamknięciu, wywołując event.preventDefault()
|
closed |
Wywoływane po zakończeniu animacji ukrywania Snackbara
|
action-click |
Wywoływane po kliknięciu przycisku akcji
|
| Nazwa |
|---|
| (domyślny) |
Treść tekstowa wiadomości Snackbara
|
action |
Przycisk akcji po prawej stronie
|
close-button |
Przycisk zamykania po prawej stronie. Aby był widoczny, należy ustawić atrybut closeable na true
|
close-icon |
Ikona w przycisku zamykania
|
Poprzedni rozdział
Slider Suwak
Następny rozdział
Switch Przełącznik
