Toast

Visão geral

Os toasts são notificações baseados no tempo, usados para mostrar mensagens breves; normalmente surgem no topo da tela e desaparecem após alguns segundos.

Instalação

O componente de Toast é um plugin e sua instação é necessária. Para isso usamos o LxToastService que faz o controle do componente:

import { createApp } from 'vue';
import { LxToastService } from '@lde/lxcomponents';

const app = createApp(App);
app.use(LxToastService);

Após isso, o serviço estará disponivel para uso através da função useToast se usar o Composition API ou usando a propriedade global $lxtoast na Options API.

Clique para visualizar o código

<template>
	<LxToast />
	<div class="d-flex gap-3">
		<button type="button" class="btn btn-success" @click="add('success')">Sucesso (sem action)</button>
		<button type="button" class="btn btn-warning" @click="add('warning')">Aviso</button>
		<button type="button" class="btn btn-danger" @click="add('danger')">Erro</button>
		<button type="button" class="btn btn-info" @click="add('info')">Info</button>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { LxToast, useToast } from '@lde/lxcomponents';

const ms = ref(3500);
const toast = useToast();

const onAction = () => {
	alert('action has pressed');
};

const add = (status) => {
	toast.add({
		time: ms.value,
		status,
		title: `Title ${status}`,
		content: 'Conteúdo do toast que deverá ter menos que 3 linhas',
		actionTitle: status !== 'success' ? 'Ver mais' : '',
		onAction
	});
};
</script>

Idealmente usa-se o LxToast no arquivo principal da aplicação (App.vue, Main.vue...) para que possa ser usado por qualquer componente que esteja dentro da aplicação.

Propriedades

Nome	Descrição	Tipo	Padrão
status	Determina o tipo de status/severidade da notificação. Os valores disponíveis são: info warning danger success	String	info
title	Define o titúlo da notificação	String	-
content	Define o conteúdo, a mensagem da notificação	String	-
closable	Determina se exibe ou não o botão de fechar	Boolean	false
actionTitle	Define o titulo do botão de ação. Caso seja deixado em branco ou omitido, o botão não irá aparecer	-
time	Tempo em milissegundos para mensagem fechar automaticamente	Number	5000