Bottom Sheet | Neural Native

Importación

component.ts

import { NeuBottomSheetComponent } from '@neural-ui/native/bottom-sheet';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Planifica un día más tranquilo

Abre una hoja compacta con un borrador. Guardar lo confirma localmente; Cancelar o cerrar conserva el resumen anterior y al reabrir se recupera el valor guardado.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBottomSheetComponent } from '@neural-ui/native/bottom-sheet';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuSwitchComponent, NeuCardComponent, NeuBottomSheetComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Planifica un día más tranquilo</text><text class="product-caption">Preferencias que cambias sin salir</text></view>
    <neu-card title="Tu resumen diario" [description]="saved() ? 'Envío por correo activado' : 'Envío por correo pausado'" variant="outlined"><view class="product-section"><text>Lo más útil de tu espacio, reunido en un mensaje.</text><view class="product-actions"><neu-button label="Preferencias de notificación" size="sm" variant="outline" (pressed)="edit()" /></view></view></neu-card>
    <neu-bottom-sheet closeLabel="Cerrar panel" title="Preferencias" height="auto" [(open)]="open"><view class="product-section"><text class="product-caption">Elige qué llega a tu correo.</text><neu-switch label="Avisos por correo" [(checked)]="draft" /><view class="product-actions"><neu-button label="Guardar cambios" size="sm" (pressed)="save()" /><neu-button label="Cancelar" size="sm" variant="text" (pressed)="open.set(false)" /></view></view></neu-bottom-sheet></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly open = signal(false);
  readonly saved = signal(true);
  readonly draft = signal(true);
  edit() { this.draft.set(this.saved()); this.open.set(true); }
  save() { this.saved.set(this.draft()); this.open.set(false); }
}

Alturas de presentación

Abre el mismo panel con altura auto, pequeña, mediana, grande o completa.

Ver y copiar el ejemplo completo

presentation-height.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBottomSheetComponent } from '@neural-ui/native/bottom-sheet';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuBottomSheetHeight } from '@neural-ui/native/bottom-sheet';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBottomSheetComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-actions">@for (choice of sheetHeights; track choice) {
    <neu-button [label]="choice" size="sm" [variant]="sheetHeight() === choice ? 'solid' : 'outline'" (pressed)="sheetHeight.set(choice); heightPreview.set(true)" />
    }</view>
    <neu-bottom-sheet closeLabel="Cerrar panel" title="Vista previa de presentación" [height]="sheetHeight()" [(open)]="heightPreview"><text>Pulsa Listo o cierra el panel para volver.</text><neu-button label="Listo" size="sm" (pressed)="heightPreview.set(false)" /></neu-bottom-sheet>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly sheetHeights = ['auto', 'sm', 'md', 'lg', 'full'] as const;
  readonly sheetHeight = signal<NeuBottomSheetHeight>('auto');
  readonly heightPreview = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Bottom Sheet · android · native capture — **Android**Captura nativa

Bottom Sheet · ios · native capture — **iOS**Captura nativa

Personalización

Contenido proyectado

Dentro del cuerpo desplazable de la hoja, debajo de su título. Proyecta formularios, texto y acciones; su estado pertenece a la aplicación.

Utiliza elementos nativos de @ng-native/components y controles públicos de Neural Native. Los estilos Angular pertenecen al componente que declara este contenido.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	Obligatorio	Input	Encabezado de la superficie, sección o presentación.
dismissible	boolean	true	Input	Permite cerrar la presentación desde la interacción del usuario. La app puede seguir cerrándola mediante open.
closeLabel	string	'Close'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
height	NeuBottomSheetHeight	'auto'	Input	Altura del panel: auto conserva la altura actual según el contenido, limitada al 85% del contenedor disponible. Las opciones sm, md, lg y full ocupan el 35%, 50%, 75% y 100%. Las alturas fijas mantienen la cabecera visible y desplazan el contenido. Son alturas seleccionables, no puntos de ajuste mediante arrastre.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
open	boolean	false	Model · bidireccional	Indica si se solicita mantener abierta la presentación o mensaje. Enlaza una signal escribible mediante [(open)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
closed	void	Comunica una solicitud de cierre; consulta el payload declarado antes de compartir handlers entre overlays.
opened	void	Comunica que la presentación nativa se ha abierto.
dismissed	void	Comunica la finalización del cierre nativo.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuBottomSheetHeight

NeuBottomSheetHeight.ts

import type { NeuBottomSheetHeight } from '@neural-ui/native/bottom-sheet';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuBottomSheetHeight = 'auto' | 'sm' | 'md' | 'lg' | 'full';