Button Group | Neural Native

Importación

component.ts

import { NeuButtonGroupComponent } from '@neural-ui/native/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.

Básico

Responde a una invitación. El estado y la confirmación muestran qué acción has ejecutado; utiliza Cambiar respuesta para probar de nuevo.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuButtonGroupComponent } from '@neural-ui/native/button-group';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuAvatarComponent, NeuButtonGroupComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="invitation-scroll" keyboardShouldPersistTaps="handled">
      <view class="invitation">
        <view class="invitation-card">
          <view class="invitation-person">
            <neu-avatar label="Alex Morgan" size="md" tone="neutral" />
            <view class="invitation-person-copy">
              <text class="invitation-name">Alex Morgan</text>
              <text class="invitation-caption">Diseño de producto</text>
            </view>
          </view>
          <text class="invitation-title">Revisión de diseño</text>
          <text class="invitation-caption">Viernes · 10:30</text>
          <neu-badge [label]="response() === 'accept' ? 'Aceptada' : response() === 'decline' ? 'Rechazada' : 'Pendiente'" [tone]="response() === 'accept' ? 'success' : 'neutral'" />
        </view>
        <neu-button-group label="Respuesta a la invitación" [items]="actions" [disabled]="response() !== ''" (activated)="answer($event)" />
        <text class="invitation-feedback" accessibilityLiveRegion="polite">{{ response() === 'accept' ? 'Has aceptado la invitación.' : response() === 'decline' ? 'Has rechazado la invitación.' : 'Responde a la invitación.' }}</text>
        @if (response()) {
          <neu-button label="Cambiar respuesta" size="sm" variant="text" (pressed)="response.set('')" />
        }
      </view>
    </scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.invitation-scroll { flex: 1; } .invitation { gap: 16px; padding-bottom: 16px; } .invitation-card { gap: 12px; padding: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); border-radius: 16px; } .invitation-person { flex-direction: row; align-items: center; gap: 12px; } .invitation-person-copy { flex: 1; min-width: 0; gap: 3px; } .invitation-name { color: var(--neu-text, #172033); font-size: 15px; font-weight: 600; } .invitation-title { color: var(--neu-text, #172033); font-size: 20px; font-weight: 600; } .invitation-caption { color: var(--neu-muted, #64748b); font-size: 14px; } .invitation-feedback { color: var(--neu-text, #172033); font-size: 15px; line-height: 22px; }
  `,
})
export class ExampleComponent {
  readonly actions: readonly NeuOption[] = [
    { id: 'accept', label: 'Aceptar' },
    { id: 'decline', label: 'Rechazar' },
  ];
  readonly response = signal<'accept' | 'decline' | ''>('');
  answer(id: string): void {
    if (id === 'accept' || id === 'decline') this.response.set(id);
  }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Button Group · android · native capture — **Android**Captura nativa

Button Group · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Actions'	Input	Nombre accesible del grupo; no añade un encabezado visible sobre los botones.
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.
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

Este componente no declara models bidireccionales.

Outputs

Nombre	Payload	Cuándo se emite
activated	string	Emite el ID del elemento activado. Tu aplicación ejecuta la acción.

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.

NeuTone

NeuTone.ts

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';