Sidebar

Ir a una sección

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.

Espacio del producto

Compara el panel compacto con la navegación de ancho completo. Cada destino muestra su contenido y las preferencias se conservan al volver.

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 { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { NeuSidebarComponent } from '@neural-ui/native/sidebar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuSwitchComponent, NeuCardComponent, NeuBadgeComponent, NeuAvatarComponent, NeuProgressBarComponent, NeuSidebarComponent, 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">Espacio del producto</text><text class="product-caption">Tus destinos siempre a mano</text></view>
    <neu-switch label="Navegación de ancho completo" [(checked)]="fullWidth" />
    <view class="product-actions"><neu-button label="Abrir navegación" size="sm" (pressed)="open.set(true)" /></view>
    @switch (destination()) {
      @case ('team') {
        <view class="product-section"><text class="product-heading">Tu equipo</text>
          @for (person of members; track person.label) { <view class="product-row"><neu-avatar [label]="person.label" size="md" /><view class="product-copy"><text class="product-heading">{{ person.label }}</text><text class="product-caption">{{ person.role }}</text></view></view> }
        </view>
      }
      @case ('settings') {
        <view class="product-surface"><text class="product-heading">Preferencias de notificación</text><neu-switch label="Avisos por correo" [(checked)]="updates" /><text class="product-caption">{{ updates() ? 'Avisos por correo activados' : 'Avisos por correo desactivados' }}</text></view>
      }
      @default {
        <neu-card title="Lanzamiento móvil" description="Próximo hito · Viernes" variant="outlined"><view class="product-section"><neu-badge label="En curso" tone="info" /><neu-progress-bar label="Preparación del lanzamiento" [value]="72" /></view></neu-card>
        <neu-card title="Renovación de la web" description="Equipo de diseño · En revisión" variant="outlined"><neu-badge label="En revisión" tone="warning" /></neu-card>
      }
    }
    <neu-sidebar closeLabel="Cerrar navegación" title="Espacio de trabajo" [items]="destinations" [fullWidth]="fullWidth()" [(open)]="open" [(value)]="destination">
      <text class="product-caption">Espacio del producto</text>
    </neu-sidebar></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 destinations: readonly NeuOption[] = [{ id: 'projects', label: 'Proyectos' }, { id: 'team', label: 'Equipo' }, { id: 'settings', label: 'Ajustes' }];
  readonly members = [{ label: 'Ada Lovelace', role: 'Diseñadora de producto' }, { label: 'Grace Hopper', role: 'Responsable de ingeniería' }, { label: 'Alan Turing', role: 'Desarrollador móvil' }];
  readonly open = signal(false);
  readonly fullWidth = signal(false);
  readonly destination = signal('projects');
  readonly updates = signal(true);
}

Destino seleccionado

Abre la navegación para cambiar el destino que muestra el contenido.

Ver y copiar el ejemplo completo

selected-destination.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuSidebarComponent } from '@neural-ui/native/sidebar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuSidebarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-button label="Abrir navegación" (pressed)="open.set(true)" />
    <neu-sidebar closeLabel="Cerrar navegación" title="Espacio de trabajo" [items]="destinations" [(open)]="open" [(value)]="destination" />
    <text class="usage-caption">Destino actual: {{ destination() || 'Ninguno' }}</text><neu-card [title]="destinationLabel()" description="Contenido de la aplicación"><text>El destino seleccionado actualiza esta pantalla.</text></neu-card>
    </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 destinations: readonly NeuOption[] = [
    {
      "id": "projects",
      "label": "Proyectos"
    },
    {
      "id": "team",
      "label": "Equipo"
    },
    {
      "id": "settings",
      "label": "Ajustes"
    }
  ];
  readonly open = signal(false);
  readonly destination = signal('projects');
  readonly destinationLabel = computed(() => this.destinations.find(item => item.id === this.destination())?.label ?? 'Espacio de trabajo');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Sidebar · android · native capture — **Android**Captura nativa

Sidebar · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	Obligatorio	Input	Encabezado de la superficie, sección o presentación.
items	readonly NeuOption[]	[]	Input	Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
fullWidth	boolean	false	Input	Ocupa todo el ancho disponible cuando está activo. Por defecto conserva el panel al 86%, con un máximo de 360 puntos. La apertura y el cierre usan el ancho medido, también al girar la pantalla o cambiar de tamaño.
closeLabel	string	'Close navigation'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.

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)].
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
navigate	string	Comunica un destino de navegación solicitado; las rutas pertenecen a la aplicación.
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);
readonly value = signal<string>('');

Tipos e interfaces de datos

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

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.

Importación