Divider
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
Sangria
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estilo de Borda
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Cor
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Margens Personalizadas
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Espessura
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Vertical
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
align
| Atributo | align |
| Descrição | Alinhamento do conteúdo quando há slot interno. |
| Tipo | "center" | "end" | "start" |
| Valor padrão | --- |
bleed
| Atributo | bleed |
| Descrição | Faz o divisor ocupar toda a largura do container, compensando paddings laterais. |
| Tipo | boolean |
| Valor padrão | false |
borderStyle
| Atributo | border-style |
| Descrição | Estilo de borda do divisor. |
| Tipo | "dashed" | "solid" |
| Valor padrão | 'solid' |
color
| Atributo | color |
| Descrição | Cor do divisor. 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 definida, usa a cor padrão do tema. |
| Tipo | string |
| Valor padrão | '' |
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() |
isDarkMode
| Atributo | is-dark-mode |
| Descrição | Ativa variante de alto contraste para fundos escuros. |
| Tipo | boolean |
| Valor padrão | false |
marginBottom
| Atributo | margin-bottom |
| Descrição | Margin bottom em pixels; se omitido, aplica padrão interno. |
| Tipo | number |
| Valor padrão | null |
marginLeft
| Atributo | margin-left |
| Descrição | Margin left em pixels; se omitido, aplica padrão interno. |
| Tipo | number |
| Valor padrão | null |
marginRight
| Atributo | margin-right |
| Descrição | Margin right em pixels; se omitido, aplica padrão interno. |
| Tipo | number |
| Valor padrão | null |
marginTop
| Atributo | margin-top |
| Descrição | Margin top em pixels; se omitido, aplica padrão interno. |
| Tipo | number |
| Valor padrão | null |
orientation
| Atributo | orientation |
| Descrição | Orientação do divisor.Em modo vertical, posicione dentro de um container com display: flex. |
| Tipo | "horizontal" | "vertical" |
| Valor padrão | 'horizontal' |
thickness
| Atributo | thickness |
| Descrição | Espessura visual do divisor. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'small' |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot opcional para conteúdo dentro do divisor (texto, ícones ou elementos personalizados). |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"content" | Conteúdo do divisor (quando há slot). |
"divider" | Elemento principal do divisor. |
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 |
|---|---|---|---|---|
dashed | border-style | Define o estilo da borda. | "dashed" | "solid" | 'solid' |
size | thickness | Define a espessura do divisor. | "large" | "medium" | "small" | 'small' |
vertical | orientation | Define a orientação do divisor. | "horizontal" | "vertical" | 'horizontal' |