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
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Opacidade customizada
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Desabilitar fechamento ao clicar
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estratégia de rolagem
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Variante Spotlight
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Variante Legibilidade
Carregando exemplo
Formatar código
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 |
contentLayout
| Atributo | content-layout |
| Descrição | Define como o scrim aplica estilos de layout ao elemento filho (slot padrão). - 'default': O scrim gerencia o layout do conteúdo, centralizando, animando e aplicando transformações e opacidade automaticamente.- 'none': o scrim age como um componente controlado pelo pai. O filho recebe apenas a máscara visual, sem interferência de posicionamento, transformação ou opacidade.Adequado para componentes que gerenciam seu próprio layout e estado de abertura. Além disso: - Foco e eventos globais** não são interceptados pelo scrim — o componente filho gerencia seu próprio foco, navegação por teclado e fechamento via ESC. - Clique no scrim emite brScrimClose sem fechar o scrim internamente, delegando o controle de estado ao pai (quem define isOpen).- Use a propriedade zIndex para posicionar o scrim abaixo do painel do filho. Exemplo: zIndex={2999} para o scrim e z-index: 3000 para o painel do filho. |
| Tipo | "default" | "none" |
| Valor padrão | 'default' |
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). (padrão)- 'parent': Ocupa apenas o elemento pai (position: absolute).O elemento pai deve ter position: relative ou outro valor diferente de static.Para a variante 'legibility', este atributo é ignorado: o posicionamento é semprecalculado automaticamente a partir das coordenadas do elemento pai. |
| Tipo | "fullscreen" | "parent" |
| Valor padrão | 'fullscreen' |
isOpen
| Atributo | is-open |
| Descrição | Ativa/desativa o scrim |
| Tipo | boolean |
| Valor padrão | false |
legibilityAnchor
| Atributo | legibility-anchor |
| Descrição | Define a borda de ancoragem da faixa de cobertura da variante legibility.Controla de qual borda (ou centro) do elemento a máscara de overlay cresce, tendo seu tamanho determinado por legibilitySize.- 'top': faixa ancorada na borda superior, cresce para baixo.- 'bottom': faixa ancorada na borda inferior, cresce para cima.- 'left': faixa ancorada na borda esquerda, cresce para a direita.- 'right': faixa ancorada na borda direita, cresce para a esquerda.- 'center': faixa centralizada verticalmente no elemento.Quando legibilitySize é null, a máscara ocupa 100% independentementeda âncora definida, equivalendo a uma cobertura total. Só tem efeito quando variant="legibility". |
| Tipo | "bottom" | "center" | "left" | "right" | "top" |
| Valor padrão | 'bottom' |
legibilitySize
| Atributo | legibility-size |
| Descrição | Define o tamanho da faixa de cobertura da variante legibility, usado emconjunto com legibilityAnchor.Aceita qualquer valor CSS de comprimento válido: - Percentual relativo ao elemento pai: '40%', '75%'- Comprimento absoluto: '120px', '8rem', '6em'- Função CSS: 'calc(100% - 2rem)'Quando null (padrão), a máscara ocupa 100% da dimensão relevante:- altura para âncoras top, bottom e center- largura para âncoras left e rightSó tem efeito quando variant="legibility" está definido. |
| Tipo | string |
| Valor padrão | null |
positionContent
| Atributo | position-content |
| Descrição | Posiciona o conteúdo no topo, centro, direita, esquerda, abaixo dentro do scrim (obrigatório) |
| 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 (obrigatório) |
| 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 |
spotlightPadding
| Atributo | spotlight-padding |
| Descrição | Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado. |
| Tipo | number |
| Valor padrão | 8 |
spotlightShape
| Atributo | spotlight-shape |
| Descrição | Define a forma da área de fresta no scrim vazado. - 'rect': Retangular com bordas retas. - 'rounded': Retangular com bordas arredondadas (border-radius de 8px). - 'circle': Elipse inscrita na área do elemento alvo. |
| Tipo | "circle" | "rect" | "rounded" |
| Valor padrão | 'rect' |
spotlightTargetId
| Atributo | spotlight-target-id |
| Descrição | Ativa o modo de scrim vazado (variante 'spotlight'), criando uma área de fresta no overlay que destaca o elemento referenciado pelo seletor CSS fornecido. |
| Tipo | string |
| Valor padrão | null |
variant
| Atributo | variant |
| Descrição | Define a variante semântica do scrim - 'focus': Redireciona o foco hierárquico do usuário. Cor #000000 com opacidade 40%. (padrão)- 'spotlight': Scrim vazado — destaca um elemento específico criando uma fresta no overlay.Aplica as mesmas cores da variante 'focus'. Use spotlightTargetId para indicar o elemento a ser destacado.- 'legibility': Melhora o contraste e leitura de texto sobre superfícies. Cor #000000 com opacidade 64%.Para cobertura parcial, use legibilityAnchor + legibilitySize.Para gradiente suave, use bgColor com um valor de gradiente CSS e customOpacity="1",ex.: bg-color="linear-gradient(to top, rgba(0,0,0,0.64), transparent)"..Quando definida, aplica automaticamente as especificações de cor e opacidade do Design System. As propriedades bgColor e customOpacity têm prioridade e sobrepõem os valores da variante. |
| Tipo | "focus" | "legibility" | "spotlight" |
| Valor padrão | 'focus' |
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 | --- |
updateSpotlight
| Assinatura | updateSpotlight() => Promise<void> |
| Descrição | Recalcula manualmente a posição e dimensões da fresta do scrim vazado. Útil quando o elemento alvo muda de posição sem disparar resize ou scroll. |
| Parâmetros | --- |
Dependências
Usado por
Gráfico
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 |