Needless UI

Mga component

Menu

Isang popup na listahan ng mga aksyon, may mga submenu, mga item na puwedeng i-check at buong suporta sa keyboard.

Import

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

NuiMenuTrigger

Nagbubukas ng menu. Karaniwang inilalagay sa isang nuiButton.

Selector
[nuiMenuTrigger]
Naka-export bilang
nuiMenuTrigger
PangalanUriDefaultPaglalarawan
nuiMenuTriggerInputMenuAng menu na bubuksan: ang ngMenu reference ng isang nuiMenu.

NuiMenu

Isang menu ng mga item, nire-render bilang popover sa tabi ng trigger nito. Ang ngMenu export nito ang Angular Aria menu na tinatanggap ng mga trigger at submenu.

Selector
[nuiMenu]
Naka-export bilang
ngMenu
PangalanUriDefaultPaglalarawan
wrapInputbooleantrueKung umiikot ang mga arrow key mula sa huling item pabalik sa una.
typeaheadDelayInputnumber500Ilang millisecond bago mag-reset ang typeahead search.
disabledInputbooleanfalseDini-disable ang buong menu.
enterInputNuiEnterKung paano ito lumilitaw: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionAng spring na nagpapagalaw sa component: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringKahit anong spring, bilang { stiffness, damping, mass }, na kino-compile sa CSS sa runtime. Ino-override nito ang motion.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
itemSelectedOutputVInilalabas ang value ng napiling item. Sa root menu, nagfa-fire din ito para sa mga item ng submenu.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiMenuItem

Isang item sa nuiMenu.

Selector
[nuiMenuItem]
PangalanUriDefaultPaglalarawan
valueInputVKinikilala ang item. Dapat natatangi ito sa buong menu, kasama ang mga submenu.
disabledInputbooleanfalseDini-disable ang item. Naaabot pa rin ito gamit ang mga arrow key pero hindi mapipili.
submenuInputMenuIsang nested na nuiMenu na binubuksan ng item na ito.
roleInput'menuitem' | 'menuitemcheckbox' | 'menuitemradio''menuitem'menuitem, menuitemcheckbox o menuitemradio.
checkedInputboolean | undefinedChecked state ng isang checkbox o radio item.
toneInput'neutral' | 'danger''neutral'danger para sa mga mapanirang aksyon.
searchTermInputstringText na itinutugma ng typeahead. Label ng item ang default.
selectedOutputVInilalabas ang value ng item kapag pinili ito gamit ang mouse o keyboard.

NuiMenuSeparator

Isang linya sa pagitan ng mga grupo ng item.

Selector
[nuiMenuSeparator]

NuiMenuShortcut

Hint ng keyboard shortcut, naka-align sa dulo ng item.

Selector
[nuiMenuShortcut]