MenuButton

Uso

Proporciona items y la etiqueta del botón. disabled impide abrirlo. El panel usa el mismo modelo que Menu: grupos anidados, acciones opcionales, entradas desactivadas y separadores. El control predeterminado es un botón neutro compacto; el contenido proyectado sustituye la etiqueta visible y conserva la relación del botón nativo con el menú.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

Seleccionado: — · itemClick: 0 · Acciones: 0

openChange: cerrado

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Abre Código para ver el modelo de datos y la implementación completa.

Seleccionado: — · itemClick: 0 · Acciones: 0

openChange: cerrado

Las opciones de Core actualizan este template. Los iconos, contadores y acciones desactivadas pertenecen al modelo de datos que se muestra en Código.

<neu-menu-button
  [items]="items"
  label="Acciones"
  [disabled]="false"
  (itemClick)="selectItem($event)"
  (openChange)="open.set($event)"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

export const items = [
  {
    "key": "new",
    "label": "Nuevo documento",
    "icon": "file",
    "shortcut": "Ctrl+N",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "workspace",
    "label": "Espacio de trabajo",
    "icon": "folder",
    "badge": 3,
    "children": [
      {
        "key": "drafts",
        "label": "Borradores",
        "children": [
          {
            "key": "review",
            "label": "Revisar borradores",
            "command": () => { /* Handler in the complete example. */ }
          }
        ]
      },
      {
        "key": "shared",
        "label": "Documentos compartidos",
        "command": () => { /* Handler in the complete example. */ }
      }
    ]
  },
  {
    "key": "divider",
    "label": "",
    "separator": true
  },
  {
    "key": "export",
    "label": "Exportar informe",
    "icon": "file",
    "disabled": true,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "search",
    "label": "Buscar documentos",
    "icon": "search",
    "visible": false,
    "command": () => { /* Handler in the complete example. */ }
  }
];

Datos y contenido

openChange comunica el estado real del panel: es un Output, no un Input open. El command de una hoja se ejecuta antes de emitir itemClick y cerrar el panel. Un clic exterior o Escape también lo cierran. neuMenuItem personaliza los elementos del panel; el contenido proyectado normal personaliza el botón.

Accesibilidad y teclado

Intro, Espacio o flecha abajo abren y enfocan la primera acción disponible; flecha arriba permite abrir en la última. Dentro del panel se usa el teclado de Menu. Escape devuelve el foco al botón. El contenido del botón debe tener un nombre claro y no contener otro botón o enlace.

Tecla	Acción
`Tab`	Enfoca el activador habilitado.
`Enter`	Abre el menú desde el activador; dentro del menú, activa la acción enfocada.
`Space`	Abre el menú desde el activador; dentro del menú, activa la acción enfocada.
`ArrowDown`	Desde el activador, abre en la primera acción disponible; dentro, pasa a la siguiente acción.
`ArrowUp`	Desde el activador, abre en la última acción disponible; dentro, pasa a la acción anterior.
`ArrowRight / ArrowLeft`	Recorre los grupos del menú según la dirección del texto.
`Home / End`	Accede a la primera o última acción disponible del nivel actual.
`Escape`	Cierra el menú emergente y devuelve el foco al activador.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template/proyección disponible tiene un ejemplo ejecutable.

Inputs

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

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`disabled`	`boolean`	`false`	`[disabled]`	Desactiva el botón/navegación. Los estados disabled de cada elemento pertenecen a items.
`items`	`NeuMenuItem[]`	`[]`	`[items]`	Datos de acciones con claves únicas; children crea grupos. Core no modifica el array.
`label`	`string`	`'Menu'`	`[label]`	Texto visible predeterminado del botón cuando no se proyecta contenido.

Outputs

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

Nombre	Valor emitido	Uso en el template	Descripción
`itemClick`	`NeuMenuItem`	`(itemClick)="onItemClick($event)"`	Emite la hoja/acción activada. El command opcional se ejecuta antes; las entradas desactivadas no se activan.
`openChange`	`boolean`	`(openChange)="onOpenChange($event)"`	Comunica el estado real del panel: true al abrir, false al cerrar.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`ng-template[neuMenuItem]`	Proyección de contenido	`<ng-content select="ng-template[neuMenuItem]" />`
`*` Contenido proyectado Ver ejemplo	Proyección de contenido Contenido proporcionado por la aplicación.	`<ng-content />` Contexto utilizado: `—`
`NeuMenuItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuMenuItem]`

ng-template[neuMenuItem] Proyección de contenido <ng-content select="ng-template[neuMenuItem]" />

*

Contenido proyectado

Ver ejemplo

Proyección de contenido

Contenido proporcionado por la aplicación.

<ng-content />

Contexto utilizado: —

NeuMenuItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuMenuItem]

Declaración

Contexto completo

import type { NeuMenuItem } from '@neural-ui/core/menu';

import { NeuMenuItemDirective } from '@neural-ui/core/menu';

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

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Public Types

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

NeuIconKeyTypeScript

NeuMenuItemTypeScript

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

import type { NeuMenuItem } from '@neural-ui/core/menu';

// Declaración pública (solo referencia)
interface NeuMenuItem {
  active?: boolean;
  badge?: string | number;
  children?: NeuMenuItem[];
  command?: (event: {
    originalEvent: Event;
    item: NeuMenuItem;
}) => void;
  data?: unknown;
  disabled?: boolean;
  icon?: NeuIconKey;
  key: string;
  label: string;
  rel?: string;
  routerLink?: string | unknown[];
  separator?: boolean;
  shortcut?: string;
  target?: string;
  tooltip?: string;
  url?: string;
  visible?: boolean;
}

Estilos y tokens

Utiliza los tokens públicos disponibles. La resolución de iconos y el diseño que rodea al ejemplo pertenecen a la aplicación. Comprueba ambos temas y pantallas estrechas.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
Sin datos

Componentes relacionados

Compara los componentes de navegación relacionados para elegir la interacción adecuada.

Uso