Divider
Diretiva standalone sobre hr nativo, com orientação tipada e semântica decorativa opcional.
Design
Preview funcional
Executado pelo componente Angular nativo com HTML hr nativo.
Toolbar · Angular
Separador vertical decorativo executado pela diretiva Angular entre Buttons nativos.
Anatomia
1 2 3
.ds-divider) — use <hr> quando a separação for semântica; marque como decorativo quando for apenas visual.2 Orientação — horizontal por padrão; vertical com
.ds-divider--vertical.3 Token de borda — usa cor semântica de divider/border, não cor hardcoded.
Divider horizontal
O divider padrão ocupa toda a largura do container e adiciona separação vertical entre o conteúdo.
Content above the divider
Content below the divider
Em uma lista
Dividers entre itens de lista criam agrupamento visual.
Notifications
Manage your notification preferences
Privacy
Control who can see your profile
Security
Two-factor authentication and password
Divider vertical
Use ds-divider--vertical dentro de um flex container para separar itens horizontalmente.
Center
Right
Em uma toolbar
Dividers verticais separam grupos de ações em uma toolbar.
Mapeamento de tokens
| Propriedade | Token | Variável CSS |
|---|---|---|
| cor da linha | component.divider.line.color.default | --ds-divider-line-color-default |
| espessura da linha | component.divider.line.thickness.default | --ds-divider-line-thickness-default |
| raio da linha | component.divider.line.radius.default | --ds-divider-line-radius-default |
Uso
Quando usar
- A proximidade e o espaçamento não distinguem suficientemente grupos relacionados.
- Uma toolbar precisa separar visualmente grupos de ações.
Quando não usar
- Um heading ou o espaçamento já comunica claramente a mudança de seção.
- A linha seria usada apenas como decoração sem função de agrupamento.
Quando escolher esta saída
Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.
Implementação
- Status
- Beta
- Distribuição
- Tarball Angular validado
Instalação
npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tispnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisyarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisbun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisEstilos do DS
@import "ds-tis/css";Importações Angular
import { TisDivider } from '@tis/angular/divider'Template
<hr tisDivider>
<div role="toolbar" aria-label="Ações de edição">
<button type="button">Copiar</button>
<hr tisDivider orientation="vertical" [decorative]="true">
<button type="button">Colar</button>
</div>Contrato público
- Pacote
@tis/angular- Entrypoint
@tis/angular/divider- Primitive
HTML hr nativo- Status
- Beta
Acessibilidade
Accessibility
| Contexto | Requisito | Implementação |
|---|---|---|
<hr> semântico | role="separator" implícito | Nenhum atributo extra necessário — o navegador fornece a role |
<div> divider decorativo | Oculto da tecnologia assistiva | aria-hidden="true" |
| Contexto interativo | Comunica a separação a leitores de tela | role="separator" |
<hr class="ds-divider"> em vez de um <div> estilizado. O elemento <hr> tem role="separator" implícito, então nenhum ARIA extra é necessário.
Responsabilidade da saída
Preserve a semântica nativa do button, submit, nomes acessíveis, estado disabled e foco visível.
Evidência de validação
Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.