Componente

Marker

Um pequeno marcador rotulado para linhas de lista, legendas e divisores de seção. Combine um ícone com conteúdo, renderize-o como link ou botão, desenhe-o como borda ou separador centralizado, e mostre estados de carregamento ou shimmer.

Ícone, conteúdo e interativo

Oak leaves

View photo

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

import { HbMarkerImports } from '@herbst/ui';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorArrowRight, phosphorLeaf } from '@ng-icons/phosphor-icons/regular';

@Component({
  selector: 'hb-demo-marker-basic',
  imports: [HbMarkerImports, NgIcon],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorArrowRight })],
  template: `
    <div class="flex flex-col items-start gap-3">
      <hb-marker>
        <hb-marker-icon><ng-icon name="phosphorLeaf" /></hb-marker-icon>
        <hb-marker-content>Oak leaves</hb-marker-content>
      </hb-marker>

      <a hb-marker href="#" (click)="$event.preventDefault()">
        <hb-marker-icon><ng-icon name="phosphorArrowRight" /></hb-marker-icon>
        View photo
      </a>

      <button hb-marker type="button">
        <hb-marker-icon><ng-icon name="phosphorLeaf" /></hb-marker-icon>
        Add to album
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMarkerBasicComponent {}

Borda e separador

Black Forest

Chapter II

Field notes

Carregando e shimmer

Uploading photos…

Syncing Herbst

Referência de API

hb-marker

Propriedade	Descrição	Tipo	Padrão
selector	Use como hb-marker, ou em um elemento a / button para torná-lo um link ou controle interativo.	hb-marker \| a[hb-marker] \| button[hb-marker]	—
[hbVariant]	default é inline; border adiciona uma régua inferior; separator centraliza o conteúdo entre duas linhas.	'default' \| 'border' \| 'separator'	'default'
[hbLoading] / [hbLoadingLabel]	Troca o ícone por um spinner e define role=status; o rótulo é anunciado à tecnologia assistiva.	boolean / string	false / 'Loading'
[hbShimmer]	Aplica um shimmer animado ao texto do conteúdo.	boolean	false
[hbRole]	Define um role ARIA explícito (ignorado durante o carregamento, que força role=status).	string \| null	null

Slots

Propriedade	Descrição	Tipo	Padrão
hb-marker-icon / [hb-marker-icon]	O slot de ícone à frente; oculto durante o carregamento.	component	—
hb-marker-content / [hb-marker-content]	O slot de rótulo. Texto projetado simples também funciona sem ele.	component	—