SplitButton

Uso

primaryClick activa la acción principal; actionClick identifica una secundaria por id. actions admite entradas disabled o divisores. loading evita activaciones duplicadas mientras haya trabajo pendiente. El Template sustituye el contenido de la acción secundaria, no el desplegable ni su teclado.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<neu-split-button
  [actions]="actions()"
  [disabled]="false"
  [loading]="false"
  [size]="'md'"
  [variant]="'solid'"
  [tone]="'brand'"
  (primaryClick)="record('primaryClick')"
  (actionClick)="record('actionClick', $event.id)"
  [actionsAriaLabel]="'Acciones de guardado'"
  [label]="'Guardar'"
  [moreActionsAriaLabel]="'Más acciones'"
></neu-split-button>

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

export const actions = signal([
  {
    "id": "pdf",
    "label": "Exportar PDF"
  },
  {
    "id": "csv",
    "label": "Exportar CSV"
  },
  {
    "id": "archive",
    "label": "Archivar",
    "disabled": true
  }
]);

Estado y eventos

primaryClick activa la acción principal; actionClick identifica una secundaria por id. actions admite entradas disabled o divisores. loading evita activaciones duplicadas mientras haya trabajo pendiente. El Template sustituye el contenido de la acción secundaria, no el desplegable ni su teclado.

Accesibilidad y teclado

Tab alcanza la acción principal y el activador. Intro/Espacio abre el menú; las flechas lo recorren y Escape lo cierra.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

import { NeuSplitButtonItemDirective } from '@neural-ui/core/split-button';

// Declaración pública (solo referencia)
export declare class NeuSplitButtonItemDirective {
}

import type { NeuSplitButtonAction } from '@neural-ui/core/split-button';

import { NeuSplitButtonItemDirective } from '@neural-ui/core/split-button';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<{
    $implicit: NeuSplitButtonAction;
}>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuButtonSize } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonSize = 'sm' | 'md' | 'lg';

import type { NeuButtonTone } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuButtonVariant } from '@neural-ui/core/button';

// Declaración pública (solo referencia)
export type NeuButtonVariant = 'solid' | 'outline' | 'ghost';

import type { NeuIconKey } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuIconKey = string;

import type { NeuIconKey } from '@neural-ui/core/foundation';

import type { NeuSplitButtonAction } from '@neural-ui/core/split-button';

// Declaración pública (solo referencia)
export interface NeuSplitButtonAction {
  disabled?: boolean;
  divider?: boolean;
  icon?: NeuIconKey;
  id: string;
  label: string;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• InlineEditor
• ToggleButtonGroup
• SpeedDial