Componente

Divider

Uma linha fina que separa conteúdo. Corre na horizontal ou vertical, nos estilos sólido, tracejado ou pontilhado, e pode carregar um rótulo centralizado ou conteúdo projetado.

Variantes

Solid divider below

Dashed divider below

Dotted divider below

End

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbDividerImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-divider-variants',
  imports: [HbDividerImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4 text-sm text-muted-foreground">
      <span>Solid divider below</span>
      <hb-divider />
      <span>Dashed divider below</span>
      <hb-divider hbVariant="dashed" />
      <span>Dotted divider below</span>
      <hb-divider hbVariant="dotted" />
      <span>End</span>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoDividerVariantsComponent {}

Rótulo e conteúdo

Autumn

Vertical

Oak

Beech

Maple

Referência de API

hb-divider

Propriedade	Descrição	Tipo	Padrão
[hbOrientation]	Direção da linha.	'horizontal' \| 'vertical'	'horizontal'
[hbVariant]	Estilo da linha.	'solid' \| 'dashed' \| 'dotted'	'solid'
[hbLabel]	Rótulo centralizado; o conteúdo projetado o sobrepõe.	string	''
[class]	Classes CSS extras mescladas no host.	string	''