Divider
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
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Sangria
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estilo de Borda
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Cor
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Margens Personalizadas
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Espessura
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Vertical
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 | ID personalizado para o elemento, útil para acessibilidade e identificação única. Se não for fornecido, um ID único será gerado automaticamente. |
| 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). |
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' |