Scrim
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Cor customizada
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Opacidade customizada
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Desabilitar fechamento ao clicar
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estratégia de rolagem
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
activator
| Atributo | activator |
| Descrição | Define o seletor para o elemento activator. Nota: O slot 'activator' tem prioridade sobre esta propriedade. |
| Tipo | string |
| Valor padrão | null |
ariaLabel
| Atributo | aria-label |
| Descrição | Define um rótulo acessível personalizado para o diálogo. Se não fornecido, será usado "Conteúdo do diálogo" como padrão. |
| Tipo | string |
| Valor padrão | null |
bgColor
| Atributo | bg-color |
| Descrição | Cor de fundo personalizada para o scrim. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não especificada, usa a cor padrão do tema. |
| Tipo | string |
| Valor padrão | null |
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
customOpacity
| Atributo | custom-opacity |
| Descrição | Define a opacidade personalizada do scrim |
| Tipo | number |
| Valor padrão | null |
disableCloseOnClick
| Atributo | disable-close-on-click |
| Descrição | Desativa o fechamento do scrim ao ser clicado |
| Tipo | boolean |
| Valor padrão | false |
displayMode
| Atributo | display-mode |
| Descrição | Define o modo de exibição do scrim: - 'fullscreen': Ocupa toda a tela (position: fixed). - 'parent': Ocupa apenas o elemento pai (position: absolute). O elemento pai deve ter position: relative ou outro valor de posicionamento diferente de static. |
| Tipo | "fullscreen" | "parent" |
| Valor padrão | 'fullscreen' |
isOpen
| Atributo | is-open |
| Descrição | Ativa/desativa o scrim |
| Tipo | boolean |
| Valor padrão | false |
positionContent
| Atributo | position-content |
| Descrição | Posiciona o conteúdo no topo, centro, direita, esquerda, abaixo dentro do scrim |
| Tipo | "bottom" | "center" | "left" | "right" | "top" |
| Valor padrão | --- |
scrollStrategy
| Atributo | scroll-strategy |
| Descrição | Define a estratégia de manipulação de rolagem quando scrim está aberto - 'block': Impede a rolagem completamente - 'close': Fecha o scrim quando ocorre rolagem |
| Tipo | "block" | "close" |
| Valor padrão | --- |
scrollThreshold
| Atributo | scroll-threshold |
| Descrição | Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim. |
| Tipo | number |
| Valor padrão | 50 |
zIndex
| Atributo | z-index |
| Descrição | Define o valor de z-index do scrim |
| Tipo | number |
| Valor padrão | null |
Slots
| Nome | Descrição |
|---|---|
"activator" | Slot para o elemento ativador do scrim, com prioridade sobre a propriedade activator. |
"default" | Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brScrimClose | Indica que o scrim foi fechado | true |
brScrimOpen | Indica que o scrim foi aberto. | true |
Métodos
close
| Assinatura | close() => Promise<void> |
| Descrição | Método público para esconder o scrim |
| Parâmetros | --- |
open
| Assinatura | open() => Promise<void> |
| Descrição | Método público para exibir o scrim |
| Parâmetros | --- |
setScrollThreshold
| Assinatura | setScrollThreshold(threshold: number) => Promise<void> |
| Descrição | Define o limite de rolagem para o fechamento automático do scrim. |
| Parâmetros | threshold: |
toggle
| Assinatura | toggle() => Promise<void> |
| Descrição | Método público para alternar o estado de exibição do scrim |
| Parâmetros | --- |
Dependências
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
autofocusContent | autofocusContent | Define se o conteúdo deve receber foco ao ser acionado. | boolean | false |
centerContent | positionContent | Define a posição do conteúdo dentro do scrim. | 'top' | 'center' | 'right' | 'left' | 'bottom' | undefined |
disableCloseOnClick | disableCloseOnClick | Desativa o fechamento do scrim ao ser clicado. | boolean | false |
id | customId | Identificador único do componente. | string | Gerado automaticamente |
show | isOpen | Ativa/desativa o scrim. | boolean | false |