Pick List | Neural Native

Importación

component.ts

import { NeuPickListComponent } from '@neural-ui/native/pick-list';

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.

Haz sitio a lo importante

Prepara un lanzamiento: añade proyectos con +, cambia su prioridad con las flechas y devuélvelos a la lista de disponibles con ×.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuPickListComponent } from '@neural-ui/native/pick-list';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuPickListComponent, 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">Haz sitio a lo importante</text><text class="product-caption">Un orden claro para el próximo lanzamiento</text></view><view class="product-section"><view class="release-planner">
      <text class="planner-hint">Usa + para incluir un proyecto, las flechas para ordenarlo y × para devolverlo.</text>
      <neu-pick-list addLabel="Añadir" removeLabel="Quitar" downLabel="Bajar" upLabel="Subir" label="Prioridades del lanzamiento" [options]="projects" [(value)]="included" selectedLabel="En el lanzamiento" availableLabel="Disponibles para añadir" emptySelectedLabel="Añade un proyecto de la lista de disponibles." emptyAvailableLabel="Todos los proyectos están en el lanzamiento." />
    </view></view></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); }
.release-planner { gap: 16px; } .planner-hint { font-size: 14px; line-height: 20px; color: var(--neu-muted, #596477); }
  `,
})
export class ExampleComponent {
  readonly projects: readonly NeuOption[] = [
    { id: 'mobile', label: 'Lanzamiento móvil', description: 'Publica la nueva app' },
    { id: 'website', label: 'Renovación de la web', description: 'Actualiza la documentación' },
    { id: 'research', label: 'Investigación con clientes', description: 'Revisa las entrevistas' },
  ];
  readonly included = signal<readonly string[]>(['mobile', 'website']);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Pick List · android · native capture — **Android**Captura nativa

Pick List · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
options	readonly NeuOption[]	[]	Input	Opciones disponibles. Los valores seleccionados se refieren a sus IDs, no a las etiquetas visibles.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
selectedLabel	string	'Selected'	Input	Texto o nombre accesible utilizado para elementos seleccionados. No ejecuta la acción por sí solo.
availableLabel	string	'Available'	Input	Texto o nombre accesible utilizado para elementos disponibles. No ejecuta la acción por sí solo.
upLabel	string	'Move up'	Input	Texto o nombre accesible utilizado para subir. No ejecuta la acción por sí solo.
downLabel	string	'Move down'	Input	Texto o nombre accesible utilizado para bajar. No ejecuta la acción por sí solo.
removeLabel	string	'Remove'	Input	Texto o nombre accesible utilizado para eliminar. No ejecuta la acción por sí solo.
addLabel	string	'Add'	Input	Prefijo accesible para añadir una opción a la lista de seleccionados.
emptySelectedLabel	string	'No items selected'	Input	Mensaje visible cuando la lista de seleccionados está vacía.
emptyAvailableLabel	string	'All items selected'	Input	Mensaje visible cuando ya no quedan opciones disponibles.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	readonly 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
valueChange	readonly string[]	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

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 value = signal<readonly 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.