Message
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Feedback
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível usado por tecnologias assistivas. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam ariaLabel. |
| Tipo | string |
| Valor padrão | --- |
autoRemove
| Atributo | auto-remove |
| Descrição | Controla o comportamento do fechamento do componente quando isClosable é verdadeiro.- Se definido como true, o componente será automaticamente removido do DOM ao clicar no botão de fechar.- Se definido como false, o componente permanecerá no DOM e apenas emitirá o evento brDidClose.Esta propriedade não tem efeito se isClosable for false.O valor padrão é false. |
| Tipo | boolean |
| Valor padrão | false |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
isClosable
| Atributo | is-closable |
| Descrição | Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem. O fechamento emitirá o evento brDidClose, mas não removerá automaticamente o componente do DOM, a menos que a propriedade autoRemove também esteja definida como true.Este recurso não está disponível para mensagens do tipo feedback. |
| Tipo | boolean |
| Valor padrão | false |
isFeedback
| Atributo | is-feedback |
| Descrição | Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário. Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback. |
| Tipo | boolean |
| Valor padrão | false |
isInline
| Atributo | is-inline |
| Descrição | Exibe o rótulo e o controle na mesma linha. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam isInline. |
| Tipo | boolean |
| Valor padrão | false |
message
| Atributo | message |
| Descrição | Define o texto da mensagem que será exibido. Este é o conteúdo principal da mensagem. A propriedade message é obrigatória e deve ser fornecida para que a mensagem apareça. (obrigatório) |
| Tipo | string |
| Valor padrão | --- |
messageTitle
| Atributo | message-title |
| Descrição | Define o título da mensagem, que é exibido no início, acima da mensagem principal. Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback. |
| Tipo | string |
| Valor padrão | --- |
showIcon
| Atributo | show-icon |
| Descrição | Se definido como verdadeiro, um ícone associado à mensagem será exibido. Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário. |
| Tipo | boolean |
| Valor padrão | false |
state
| Atributo | state |
| Descrição | Define o estado do message. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'. |
| Tipo | "danger" | "info" | "success" | "warning" |
| Valor padrão | 'info' |
Slots
| Nome | Descrição |
|---|---|
"close-button" | Botão de fechar customizado. Quando utilizado, o botão padrão é substituído. |
"default" | Conteúdo principal da mensagem. Quando utilizado, a prop message é ignorada. |
"icon" | Ícone customizado da mensagem. Quando utilizado, o ícone padrão gerado pela prop state é ignorado. |
"message-body" | Corpo customizado da mensagem. Quando utilizado, a prop message é ignorada. |
"message-title" | Título customizado da mensagem. Quando utilizado, a prop messageTitle é ignorada. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidClose | Evento emitido quando o usuário fecha a mensagem, se closable for true. | true |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"close" | Área do botão de fechar. |
"container" | Wrapper principal da mensagem. |
"content" | Área de conteúdo da mensagem. |
"icon" | Área do ícone da mensagem. |
Dependências
Usado por
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
closable | isClosable | Habilita o botão de fechar a mensagem. Opcional | boolean | false |
feedback | isFeedback | Mensagem contextual de feedback. Opcional | boolean | false |
inline | isInline | Exibir o título na mesma linha que a mensagem. Opcional | boolean | false |
showIcon | showIcon | Exibir ícone na mensagem. Opcional | boolean | false |
text | message | Texto da mensagem. Obrigatório | string | '' |
title | messageTitle | Título da mensagem. Opcional | string | '' |
type | state | Estado da mensagem. Obrigatório. Valores: 'info', 'warning', 'danger', 'success' | string | 'info' |