Copiar página como Markdown para IA
Divider
Visão Geral
O br-divider é uma linha que separa seções ou grupos de conteúdo. Pode ser horizontal ou vertical e ter um texto no meio.
<br-divider></br-divider>
<br-divider>ou</br-divider>
<br-divider orientation="vertical" thickness="medium" border-style="dashed"></br-divider>
Quando usar
- Marcar o fim de um bloco e o início de outro.
- Separar alternativas, como "Entrar com gov.br" ou "Entrar com certificado digital".
Quando evitar
- Quando o espaço em branco já separa bem o conteúdo.
Consulte as diretrizes de design do GovBR.
Carregando preview…
HTML
Controles do componente
Console: logs, eventos e erros
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Desfazer alteração
Refazer alteração
Comparar alterações
Formatar código
Resetar código para o estado inicial
Propriedades
align
| Atributo | align |
|---|---|
| Descrição | Alinhamento do conteúdo quando há slot interno. Valores inválidos são ignorados. |
| 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. Valores inválidos usam solid. |
| 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 | '' |
colorMode
| Atributo | color-mode |
|---|---|
| Descrição | Esquema de cor padrão. Quando informado, tem precedência sobre isDarkMode; valores inválidos usam light. |
| Tipo | "dark" | "light" |
| 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 generateUniqueId(). |
| Tipo | string |
| Valor padrão | generateUniqueId() |
isDarkMode
| Atributo | is-dark-mode |
|---|---|
| Depreciação | Use colorMode. |
| 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. Deve ser um número finito; valores inválidos usam 0. |
| Tipo | number |
| Valor padrão | null |
marginLeft
| Atributo | margin-left |
|---|---|
| Descrição | Margin left em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0. |
| Tipo | number |
| Valor padrão | null |
marginRight
| Atributo | margin-right |
|---|---|
| Descrição | Margin right em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0. |
| Tipo | number |
| Valor padrão | null |
marginTop
| Atributo | margin-top |
|---|---|
| Descrição | Margin top em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0. |
| 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. Valores inválidos usam horizontal. |
| Tipo | "horizontal" | "vertical" |
| Valor padrão | 'horizontal' |
thickness
| Atributo | thickness |
|---|---|
| Descrição | Espessura visual do divisor. Valores inválidos usam small. |
| 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 de <br-divider> (1.x → 2.x)
| 1.x | 2.x | O que fazer |
|---|---|---|
dashed | border-style="dashed" | Use o estilo de borda. |
size | thickness | Renomeie: small, medium ou large. |
vertical | orientation="vertical" | Troque o booleano pela orientação. |
1.x:
<br-divider vertical size="large" dashed></br-divider>
2.x:
<br-divider orientation="vertical" thickness="large" border-style="dashed"></br-divider>
