Componente

Empty

Um espaço reservado para estados vazios — sem resultados, lista vazia, primeiro acesso. Componha-o com ícone, título, descrição e uma área de ações, em vários tamanhos e estilos.

Anatomia

No photos found

Try a different search, or add a new autumn photo.

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

import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorMagnifyingGlass } from '@ng-icons/phosphor-icons/regular';

import { HbButtonComponent, HbEmptyImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-empty-basic',
  imports: [HbEmptyImports, HbButtonComponent, NgIcon],
  providers: [provideIcons({ phosphorMagnifyingGlass })],
  template: `
    <hb-empty class="w-full max-w-md rounded-lg border border-border">
      <hb-empty-header>
        <hb-empty-media hbVariant="icon">
          <ng-icon name="phosphorMagnifyingGlass" />
        </hb-empty-media>
        <hb-empty-title>No photos found</hb-empty-title>
        <hb-empty-description>
          Try a different search, or add a new autumn photo.
        </hb-empty-description>
      </hb-empty-header>

      <hb-empty-content>
        <button hb-button hbSize="sm">Add photo</button>
      </hb-empty-content>
    </hb-empty>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoEmptyBasicComponent {}

Variante e fundo

Outline

A dashed border frames the empty region.

Muted background

A soft fill sets the region apart.

Tamanhos

Extra small

Tight padding for inline empty states.

Large

Generous padding for full-page empty states.

Referência de API

hb-empty

Propriedade	Descrição	Tipo	Padrão
[hbSize]	Escala de espaçamento e gap.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbVariant]	Simples, ou emoldurado com borda tracejada.	'default' \| 'outline'	'default'
[hbBackground]	Preenchimento de fundo suave opcional.	'none' \| 'muted'	'none'

Parts

Propriedade	Descrição	Tipo	Padrão
hb-empty-header	Coluna centralizada com a mídia, título e descrição.	slot	—
hb-empty-media [hbVariant]	O ícone ou ilustração; a variante icon o envolve num bloco suave.	'default' \| 'icon'	'default'
hb-empty-title / hb-empty-description	Título e texto de apoio.	slot	—
hb-empty-content	Área de ações abaixo do cabeçalho (botões, links).	slot	—