Coloca neu-block-ui dentro de un contenedor position:relative, junto a los controles que bloquea. blocked muestra la superposición, el indicador y message opcional; variant elige default, light o dark. Los controles externos siguen disponibles. Para bloquear sin superposición, aplica [neuBlockUI] al contenedor del contenido: la directiva desactiva ese subárbol sin añadir una capa visual.
Prueba [neuBlockUI] directamente sobre el contenido del informe. Bloquea la interacción y aplica aria-busy, pero no renderiza un indicador ni un mensaje. El interruptor externo permanece disponible.
La aplicación gestiona blocked y la operación que lo cambia. El componente desactiva los controles hermanos mientras está activo y restaura su estado previo al liberarlos o destruirse. Mantén la acción para desbloquear fuera de la región bloqueada. Ni el componente ni la directiva tienen Outputs o Templates.
Proporciona un mensaje de estado útil; la superposición lo anuncia sin interrumpir. El bloqueo impide interactuar con los controles mediante teclado, por lo que debe quedar accesible una forma de cancelar o finalizar. No bloquees toda la página para una tarea local. El indicador respeta el movimiento reducido.
Tecla
Acción
—
La superficie de bloqueo no tiene acciones de teclado propias. Los controles inferiores quedan bloqueados; proporciona una acción accesible de cancelar o terminar fuera del contenido bloqueado.
Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.
Inputs
Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.
Nombre
Tipo
Por defecto
Uso en el template
Descripción
blocked
boolean
false
[blocked]
Muestra la superposición y desactiva los controles hermanos.
message
string
''
[message]
Texto de estado opcional dentro de la superposición.
variant
"default" | "light" | "dark"
'default'
[variant]
Aspecto de la superposición: default, light o dark.
Templates
ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.
Este componente no expone proyección de contenido ni templates públicos de personalización.
Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.
Tokens específicos
Token
Efecto
Estado / variante
Valor / origen
Alternativa
--neu-block-ui-bg
Valor del tema heredado que utiliza este componente
Superficie del campo
rgba(255, 255, 255, 0.6)Declaración raíz
Sin alias de token
--neu-block-ui-radius
Radio de esquina
Superficie del campo
var(--neu-radius-lg)Declaración raíz
--neu-radius-lg
Tokens compartidos utilizados
Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.
Token
Efecto aquí
Otros efectos
Valor / alternativa
--neu-primary
Color de marca en controles activos y énfasis
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#007aff
--neu-text
Color del texto principal y de los iconos que lo heredan
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#0f172a
--neu-space-4
Separación entre contenido y controles
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
1rem
--neu-spinner-track
Valor del tema heredado que utiliza este componente
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
