Componente

Block UI

Bloquea temporalmente un contenedor con overlay, spinner y mensaje de estado durante trabajo asíncrono

import { NeuBlockUIComponent, NeuBlockUIDirective } from '@neural-ui/core/block-ui';

Bloqueado con mensaje

Cargando datos…

Contenido bloqueado

Este área queda inaccesible mientras está bloqueada.

Variantes de overlay

default

contenido

light

contenido

dark

contenido

import { NeuBlockUIComponent } from '@neural-ui/core/block-ui';

@Component({
  imports: [NeuBlockUIComponent],
  template: `
    <div style="position: relative">
      <neu-block-ui [blocked]="loading()" message="Loading…" />
      <form><!-- form fields --></form>
    </div>
  `
})
export class MyComponent {
  loading = signal(false);

  async submit() {
    this.loading.set(true);
    await saveData();
    this.loading.set(false);
  }
}