Acciones
Toggle Button Group
Muestra la opción seleccionada en un grupo de controles conmutables.
Importación
import { NeuToggleButtonGroupComponent } from '@neural-ui/native/toggle-button-group';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.
Selección única
Elige una vista del calendario. El segmento con fondo de color marca la opción actual; vuelve a pulsarlo para desmarcarlo.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuToggleButtonGroupComponent } from '@neural-ui/native/toggle-button-group';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';
@Component({
selector: 'app-example',
imports: [NeuToggleButtonGroupComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="toggle-example">
<text class="usage-heading">Vista del calendario</text>
<neu-toggle-button-group label="Vista del calendario" [options]="periods" [(value)]="period" />
<view class="toggle-preview">
<text class="usage-heading">{{ period()[0] === 'day' ? 'Vista del día' : period()[0] === 'week' ? 'Vista de la semana' : period()[0] === 'month' ? 'Vista del mes' : 'Elige una vista' }}</text>
<text class="usage-caption">{{ period().length ? 'La agenda utiliza la vista seleccionada.' : 'Pulsa un segmento para elegir cómo ver la agenda.' }}</text>
</view>
</view>
</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; }
.toggle-example { gap: 16px; } .toggle-preview { gap: 10px; padding: 16px; border-radius: 12px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); } .toggle-summary { color: var(--neu-text, #172033); font-size: 14px; }
`,
})
export class ExampleComponent {
readonly periods: readonly NeuOption[] = [{ id: 'day', label: 'Día' }, { id: 'week', label: 'Semana' }, { id: 'month', label: 'Mes' }];
readonly period = signal<readonly string[]>(['week']);
}Selección múltiple
Activa varios canales de avisos. Cada segmento resaltado permanece seleccionado de forma independiente.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuToggleButtonGroupComponent } from '@neural-ui/native/toggle-button-group';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';
@Component({
selector: 'app-example',
imports: [NeuToggleButtonGroupComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<view class="toggle-example">
<text class="usage-heading">Canales de avisos</text>
<neu-toggle-button-group label="Canales de avisos" [options]="channels" [multiple]="true" [(value)]="selected" />
<view class="toggle-preview">
<text class="usage-heading">Preferencias de envío</text>
<text class="usage-caption">{{ selected().length ? 'Los avisos utilizarán los canales resaltados.' : 'Los avisos están pausados. Elige uno o varios canales.' }}</text>
@if (selected().includes('email')) { <text class="toggle-summary">Avisos por correo activados</text> }
@if (selected().includes('push')) { <text class="toggle-summary">Notificaciones push activadas</text> }
@if (selected().includes('sms')) { <text class="toggle-summary">Avisos por SMS activados</text> }
</view>
</view>
</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; }
.toggle-example { gap: 16px; } .toggle-preview { gap: 10px; padding: 16px; border-radius: 12px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); } .toggle-summary { color: var(--neu-text, #172033); font-size: 14px; }
`,
})
export class ExampleComponent {
readonly channels: readonly NeuOption[] = [{ id: 'email', label: 'Correo' }, { id: 'push', label: 'Push' }, { id: 'sms', label: 'SMS' }];
readonly selected = signal<readonly string[]>(['email', 'push']);
}Playground interactivo
Ajusta la configuración y prueba el resultado.
Capturas del dispositivo en inglés.
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. |
| multiple | boolean | false | Input | Permite varias opciones o archivos cuando se admite; consulta el tipo declarado del model. |
| disabled | boolean | false | Input | Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores. |
| tone | NeuTone | 'brand' | Input | Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color. |
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.
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
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. |
NeuTone
import type { NeuTone } from '@neural-ui/native/foundation';
// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';