Alert

Visão geral

As notificações Inline (alerts) não causam interrupções e ficam alocadas em uma area especifica na UI. Elas mostram mensagens geradas por tarefas ou pelo sistema e permanecem visíveis até que o usuário as descarte ou até que a notificação seja resolvida. Seu uso é recomendado em validações de erros no formulário.

Notificação de erro

Aqui vai o conteúdo

Notificação de informação

Aqui vai o conteúdo

Notificação de aviso

Aqui vai o conteúdo

Notificação de sucesso

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Quos, nisi? Velit reiciendis ratione obcaecati, nihil incidunt aliquid iste quod distinctio impedit harum a eveniet, praesentium vel necessitatibus nisi. Sit, laboriosam?

Link

Clique para visualizar o código

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

const actionTitle = ref('Ação');

const onClose = () => {
	console.log('close was clicked!');
};

const onAction = () => {
	alert('action was clicked');
};
</script>

<template>
	<div class="mb-3">
		<LxAlert :status="'danger'" title="Notificação de erro" content="Aqui vai o conteúdo" :actionTitle="actionTitle" @close="onClose" @action="onAction" />
	</div>
	<div class="mb-3">
		<LxAlert :status="'info'" title="Notificação de informação" content="Aqui vai o conteúdo" :actionTitle="actionTitle" @close="onClose" @action="onAction" closable />
	</div>
	<div class="mb-3">
		<LxAlert :status="'warning'" title="Notificação de aviso" content="Aqui vai o conteúdo" :actionTitle="actionTitle" @close="onClose" @action="onAction" closable />
	</div>
	<div class="mb-3">
		<LxAlert :status="'success'" title="Notificação de sucesso" @close="onClose" @action="onAction">
			<template #content>
				<div class="d-flex flex-column gap-3">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
					<p>
						Quos, nisi? Velit reiciendis ratione obcaecati, nihil incidunt aliquid iste quod distinctio impedit harum a eveniet, praesentium vel necessitatibus nisi.
						Sit, laboriosam?
					</p>
					<a href="#">Link</a>
				</div>
			</template>
		</LxAlert>
	</div>
</template>

Variações

Variação	Descrição
Toast	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.

Propriedades

Nome	Descrição	Tipo	Padrão
status	Define o status da notificação. Os valores disponíveis são: info warning danger success	String	info
title	Define o titulo do alert	String	-
content	Define o conteúdo/sub-titulo do alert	String	-
closable	Define se o componente poderá ser fechado	Boolean	false
actionLabel	Define a label do botão de ação. Caso seja deixado em branco, o botão não irá aparecer.	String	-

Eventos

Nome	Atributos	Listener	Descrição
close	-	@close	Emitido quando clica em 'x' (fechar)
action	-	@action	Emitido quando clica no botão de ação

Slots

Nome	Descrição
content	Conteúdo principal do alerta