Componente

Block UI

Um overlay que bloqueia uma região — ou a tela inteira — enquanto trabalha. Desabilita o conteúdo envolvido, mostra spinner, ícone ou mensagem personalizada, e limpa ao desbloquear.

Bloqueado com spinner

Autumn walk

Oak leaves along the river — Freiburg.

Taken Nov 3, 2026 · Black Forest.

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

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

@Component({
  selector: 'hb-demo-block-ui-spinner',
  imports: [HbBlockUiComponent, HbButtonComponent],
  template: `
    <div class="w-full max-w-sm">
      <hb-block-ui [hbBlocked]="loading()" hbSpinner class="rounded-lg border border-border">
        <div class="flex flex-col gap-1 p-6">
          <h3 class="font-medium">Autumn walk</h3>
          <p class="text-sm text-muted-foreground">Oak leaves along the river — Freiburg.</p>
          <p class="text-sm text-muted-foreground">Taken Nov 3, 2026 · Black Forest.</p>
        </div>
      </hb-block-ui>

      <button hb-button hbSize="sm" class="mt-3" [hbDisabled]="loading()" (click)="reload()">
        Reload
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoBlockUiSpinnerComponent {
  protected readonly loading = signal(false);

  protected reload(): void {
    this.loading.set(true);
    setTimeout(() => this.loading.set(false), 1500);
  }
}

Ícone e mensagem personalizada

October in the Black Forest

This photo was archived and can no longer be edited.

Archived — read only

Tela cheia

Referência de API

hb-block-ui

Propriedade	Descrição	Tipo	Padrão
[hbBlocked]	Mostra o overlay e torna o conteúdo envolvido inerte.	boolean	false
[hbFullScreen]	Cobre toda a viewport em vez de apenas a região envolvida.	boolean	false
[hbSpinner]	Mostra o spinner embutido no overlay.	boolean	false
[hbIcon]	Ícone exibido no overlay quando não há spinner.	string	''
[hbBlockUiContent]	Conteúdo do overlay projetado, como uma mensagem de status.	slot	—
[class]	Classes CSS extras mescladas no host. O conteúdo padrão é a região sendo bloqueada.	string	''