API der Menu-Komponente

Import

import-menu.ts

import {
  NuiMenu,
  NuiMenuItem,
  NuiMenuSeparator,
  NuiMenuShortcut,
  NuiMenuTrigger,
} from '@needless-ui/angular/menu';

NuiMenuTrigger

Öffnet ein Menü. Wird meist auf einen nuiButton angewendet.

Selektor: [nuiMenuTrigger]
Exportiert als: nuiMenuTrigger

NuiMenuTrigger: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`nuiMenuTrigger`Input	`Menu`		Das zu öffnende Menü: die `ngMenu`-Referenz eines `nuiMenu`.

NuiMenu

Ein Menü aus Einträgen, als Popover neben seinem Trigger gerendert. Sein Export ngMenu ist das Angular-Aria-Menü, das Trigger und Untermenüs erwarten.

Selektor: [nuiMenu]
Exportiert als: ngMenu

NuiMenu: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`wrap`Input	`boolean`	`true`	Ob die Pfeiltasten vom letzten Eintrag wieder zum ersten springen.
`typeaheadDelay`Input	`number`	`500`	Millisekunden, bis die Typeahead-Suche zurückgesetzt wird.
`disabled`Input	`boolean`	`false`	Deaktiviert das gesamte Menü.
`enter`Input	`NuiEnter`		Wie die Komponente erscheint: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` oder `none`.
`motion`Input	`NuiMotion`		Die Feder, mit der sich die Komponente bewegt: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` oder `none`.
`spring`Input	`NuiSpring`		Eine beliebige Feder als `{ stiffness, damping, mass }`, zur Laufzeit zu CSS kompiliert. Hat Vorrang vor `motion`.
`corners`Input	`NuiCorners`		Die Form der Ecken: `round`, `squircle`, `bevel`, `scoop`, `notch` oder `square`.
`radius`Input	`NuiRadius`		Wie groß die Ecken sind: `none`, `small`, `medium`, `large` oder `full`.
`density`Input	`NuiDensity`		Wie viel Platz die Komponente einnimmt: `compact`, `regular` oder `roomy`.
`itemSelected`Output	`V`		Emittiert den Wert des gewählten Eintrags. Am obersten Menü auch für Einträge aus Untermenüs.

Anpassungs-Inputs, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiMenuItem

Ein Eintrag in einem nuiMenu.

Selektor: [nuiMenuItem]

NuiMenuItem: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`value`Input	`V`		Identifiziert den Eintrag. Muss im gesamten Menü eindeutig sein, Untermenüs eingeschlossen.
`disabled`Input	`boolean`	`false`	Deaktiviert den Eintrag. Er bleibt mit den Pfeiltasten erreichbar, kann aber nicht gewählt werden.
`submenu`Input	`Menu`		Ein verschachteltes `nuiMenu`, das dieser Eintrag öffnet.
`role`Input	`'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'`	`'menuitem'`	`menuitem`, `menuitemcheckbox` oder `menuitemradio`.
`checked`Input	`boolean \| undefined`		Auswahlzustand eines Checkbox- oder Radio-Eintrags.
`tone`Input	`'neutral' \| 'danger'`	`'neutral'`	`danger` für destruktive Aktionen.
`searchTerm`Input	`string`		Text, den die Typeahead-Suche abgleicht. Standardmäßig die Beschriftung des Eintrags.
`selected`Output	`V`		Emittiert den Wert des Eintrags, wenn er per Maus oder Tastatur gewählt wird.

NuiMenuSeparator

Eine Linie zwischen Gruppen von Einträgen.

Selektor: [nuiMenuSeparator]

NuiMenuShortcut

Ein Hinweis auf ein Tastenkürzel, am Ende eines Eintrags ausgerichtet.

Selektor: [nuiMenuShortcut]