SnackbarSnackbar
O componente Snackbar é usado para exibir informações breves sobre o processo do aplicativo na página.
Além de usar o componente diretamente, mdui também fornece uma função mdui.snackbar para simplificar o uso do componente Snackbar.
Importe o componente conforme necessário:
import 'mdui/components/snackbar.js';
Importe o tipo TypeScript do componente conforme necessário:
import type { Snackbar } from 'mdui/components/snackbar.js';
Exemplo de uso:
Photo archived
Abrir Snackbar
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Use o atributo placement para definir a posição de exibição do Snackbar.
Photo archived
top-start
Photo archived
top
Photo archived
top-end
Photo archived
bottom-start
Photo archived
bottom
Photo archived
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Photo archived</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>
Fonte
Use o atributo action para adicionar um botão de ação no lado direito do Snackbar, especificando o texto do botão. Clicar no botão de ação dispara o evento action-click. Se você quiser que o botão de ação apareça no estado de carregamento, adicione o atributo action-loading.
Photo archived
Abrir Snackbar
<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>
<mdui-button>Abrir 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>
FonteVocê também pode adicionar um elemento personalizado no lado direito do Snackbar pelo slot action.
Photo archived
Undo
Abrir Snackbar
<mdui-snackbar class="example-action-slot">
Photo archived
<mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fonte
Use o atributo closeable para que um botão de fechar apareça no lado direito do Snackbar. Clicar neste botão fecha o Snackbar e dispara o evento close.
Photo archived
Abrir Snackbar
<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
FonteVocê pode personalizar o elemento do botão de fechar pelo slot close-button.
Photo archived
Abrir Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Photo archived
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
FonteDefina o atributo close-icon para modificar o ícone do Material Icons no botão de fechar padrão. Você também pode personalizar o elemento do ícone no botão de fechar pelo slot close-icon.
Photo archived
Abrir Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Photo archived</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fonte
Por padrão, o texto da mensagem não tem limite de linhas. Você pode usar o atributo message-line para limitar o número de linhas do texto, no máximo 2 linhas.
The item already has the label "travel". You can add a new label. You can add a new label.
Abrir Snackbar
<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fonte
Use o atributo auto-close-delay para definir o atraso para o fechamento automático, em milissegundos. O valor padrão é 5000 milissegundos.
Photo archived
Abrir Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fonte
Use o atributo close-on-outside-click para fechar o Snackbar ao clicar fora da área do Snackbar.
Photo archived
Abrir Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>
<mdui-button>Abrir Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Fonte| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
open | open | | boolean | false |
Define se o Snackbar está visível.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Posição de exibição do Snackbar. O padrão é bottom. Os valores possíveis são:
top: Topo centralizado.top-start: Topo alinhado à esquerda.top-end: Topo alinhado à direita.bottom: Base centralizada.bottom-start: Base alinhada à esquerda.bottom-end: Base alinhada à direita.
|
action | action | | string | - |
Texto do botão de ação. Também pode ser definido via slot="action" para configurar o botão de ação.
|
action-loading | actionLoading | | boolean | false |
Define se o botão de ação está em estado de carregamento.
|
closeable | closeable | | boolean | false |
Define se deve ser exibido um botão de fechar à direita.
|
close-icon | closeIcon | | string | - |
Nome do ícone Material Icons para o botão de fechar. Também pode ser definido via slot="close-icon".
|
message-line | messageLine | | 1 | 2 | - |
Número máximo de linhas exibidas para o texto da mensagem. O padrão é sem limite. Os valores possíveis são:
1: No máximo uma linha.2: No máximo duas linhas.
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Atraso, em milissegundos, para fechar automaticamente. Defina como 0 para não fechar automaticamente. O padrão é 5000 milissegundos.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Define se clicar ou tocar fora da área do Snackbar deve fechá-lo.
|
| Nome |
|---|
open |
Disparado quando o Snackbar começa a ser exibido. Pode impedir a exibição chamando event.preventDefault().
|
opened |
Disparado quando a animação de exibição do Snackbar é concluída.
|
close |
Disparado quando o Snackbar começa a ser ocultado. Pode impedir o fechamento chamando event.preventDefault().
|
closed |
Disparado quando a animação de ocultação do Snackbar é concluída.
|
action-click |
Disparado ao clicar no botão de ação.
|
| Nome |
|---|
| (padrão) |
Conteúdo de texto da mensagem do Snackbar.
|
action |
Botão de ação à direita.
|
close-button |
Botão de fechar à direita. É necessário que o atributo closeable esteja definido como true para ser exibido.
|
close-icon |
Ícone dentro do botão de fechar.
|
Capítulo anterior
Slider Slider
Próximo capítulo
Switch Switch
