BottomSheet

Uso

La aplicación gestiona open. Conéctalo y acepta closeRequested aplicando false cuando proceda cerrar. opened y closed informan de transiciones, no sustituyen open. Proyecta el contenido y los espacios de cabecera o pie disponibles. Mantén un activador con nombre para recuperar el foco. Bloquear el cierre automático no debe eliminar una acción explícita para terminar.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<button neu-button (neuClick)="open.set(true)">
  {{ t("Open example", "Abrir ejemplo") }}</button
><neu-bottom-sheet
  [open]="open()"
  [size]="'md'"
  [disableClose]="false"
  (closeRequested)="open.set(false); record('closeRequested', $event)"
  (opened)="record('opened')"
  (closed)="record('closed')"
  [closeLabel]="'Cerrar'"
  [title]="'Revisar cambios'"
><p>
    {{
      t(
        "Review the content, then close to return to the trigger.",
        "Revisa el contenido y cierra para regresar al activador."
      )
    }}
  </p>
  <button neu-button variant="outline" (neuClick)="open.set(false)">
    {{ t("Done", "Terminar") }}
  </button></neu-bottom-sheet
>

import { signal } from '@angular/core';

export const open = signal(false);

Estado y eventos

La aplicación gestiona open. Conéctalo y acepta closeRequested aplicando false cuando proceda cerrar. opened y closed informan de transiciones, no sustituyen open. Proyecta el contenido y los espacios de cabecera o pie disponibles. Mantén un activador con nombre para recuperar el foco. Bloquear el cierre automático no debe eliminar una acción explícita para terminar.

Accesibilidad y teclado

Tab permanece en la superficie modal. Escape solicita cerrar cuando está habilitado. El cierre devuelve el foco al activador; Sidebar persistente es navegación de la página, no una tarea modal.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuBottomSheetSize } from '@neural-ui/core/bottom-sheet';

// Declaración pública (solo referencia)
export type NeuBottomSheetSize = 'sm' | 'md' | 'lg' | 'full';

import type { NeuCloseReason } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuCloseReason = 'escape' | 'outside' | 'action' | 'programmatic-command';

import type { NeuCloseReason } from '@neural-ui/core/foundation';

import type { NeuCloseRequest } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export interface NeuCloseRequest {
  readonly originalEvent?: Event;
  readonly reason: NeuCloseReason;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• Dialog
• Sidebar
• ConfirmDialog