DashboardCards

DashboardCards são componentes utilizados para construir cards com informações que requeiram uma descrição curta e que possam ser classificadas em status.

---

Quando usar:

• For necessário mostrar informações de modo resumido em dashboards
• For necessário um card com botão clicável e que leve o usuário a uma nova tela.
• A informação descrita no card possa ser classificada.

Quando não usar:

• Houver um conjunto muito grande de informações a ser exibido.
• Se deseja utilizar ícones em conjunto com os dados. Utilize ExpansionCards nesses cenários.

Observações:

• O DashboardCard exibee informações de modo vertical, ao contrário do ExpansionCard.
• ExpansionCards comunicam informações de modo mais direto e com auxílio de ícones. DashboardCars focam mais em descrição e classificação das informações.
• Considere utilizar DashboardCards se precisa que o componente redirecione o usuário para outra página para mais informações.
• Considere ExpansionCards se for necessário detalhar o conteúdo do card, mas sem tirar o usuário da página.

---

Uso

<CdsDashboardCard
	:showAction="true"
	action="Ver lista"
	@action-button-click="handleActionClick"
>
	<template #title-slot>
		<bold>45</bold>
		<span style="margin-left: 8px; font-size: 13.5px; font-weight: 500;">gestantes</span>
	</template>
	<template #status-slot>
		<CdsBadge variant="red">Alerta</CdsBadge>
	</template>
	<template #description-slot>
		Não realizam consulta há mais de 30 dias
	</template>
</CdsDashboardCard>

---

Preview

gestantes

Alerta

Não realizam consulta há mais de 30 dias

Ver lista

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
title	string	''	--	O título do alert. O título também pode ser usado com o slot.
description	string	''	--	Texto que será exibido abaixo do título. Utilizado para melhor descrever a informação exibida no dashboard-card.
showAction	boolean	false	--	Prop que exibe o botão de ação do dashboard-card.
action	string	'Action'	--	Prop que indica o texto do botão de ação do dashboard-card.
fluid	boolean	false	--	Prop que indica se o componente deverá ocupar 100% do espaço disponível.

Eventos

Nome	Descrição
@action-button-click

Slots

Nome	Descrição
#title-slot
#status-slot
#description-slot
#action-slot	Slot para renderização customizada do conteúdo das actions. Sobrescreve a prop `showAction`.

---