AlertCard
AlertCards são componentes utilizados para transmitir mensagens contextuais importantes e apresentar possíveis ações a serem tomadas em cima delas.
Quando usar
- For necessário mostrar informações contextuais extensas.
- For necessário mostrar informações contextuais que requerem ações do usuário sobre elas.
Quando não usar
- For necessário mostrar informações de maneira discreta ou que pode ser ocultada. Para esse caso, recomendamos o uso de toasts.
- For necessário mostrar informações contextuais curtas.
Uso
js
<CdsAlertCard
variant="green"
size="md"
text="Lorem Ipsum"
@click="alertCardClick = true"
/>Preview
Título do AlertCardSubtítulo do AlertCard
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'info' | info warning danger | A variante do Alert. São 3 variantes implementadas: 'info', 'warning' e 'danger' |
selectable | boolean | false | -- | Define se o AlertCard é selecionável. |
muted | boolean | false | -- | Variante de estilo muted do componente. |
noTitle | boolean | false | -- | Controla exibição do título do AlertCard. |
title | string | 'Título do AlertCard' | -- | O título do alerta. O título também pode ser usado com o slot. |
subTitle | string | 'Subtítulo do AlertCard' | -- | O subtítulo do alerta. O subtítulo também pode ser usado com o slot. |
withIcon | boolean | false | -- | Determina se o Alert vai ter ícone ou não. |
value | boolean | false | -- | Prop utilizada como v-model. Controla a visibilidade do popover . |
Slots
Nome | Descrição |
|---|---|
#subTitle-slot | |
#content-slot | Slot usado para inserção de conteúdo adicional no AlertCard |