Menu API · Needless UI

가져오기

import-menu.ts

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

메뉴를 엽니다. 보통 nuiButton에 적용합니다.

NuiMenuTrigger: 속성
이름	타입	기본값	설명
`nuiMenuTrigger`입력	`Menu`		열 메뉴입니다. `nuiMenu`의 `ngMenu` 참조를 지정합니다.

항목으로 구성된 메뉴로, 트리거 옆에 팝오버로 렌더링됩니다. ngMenu로 내보내는 것은 트리거와 하위 메뉴가 받는 Angular Aria 메뉴입니다.

NuiMenu: 속성
이름	타입	기본값	설명
`wrap`입력	`boolean`	`true`	화살표 키로 마지막 항목에서 첫 번째 항목으로 순환할지 여부.
`typeaheadDelay`입력	`number`	`500`	문자 검색이 초기화되기까지의 시간(밀리초).
`disabled`입력	`boolean`	`false`	메뉴 전체를 비활성화합니다.
`enter`입력	`NuiEnter`		등장하는 방식: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide`, `none` 중 하나.
`motion`입력	`NuiMotion`		움직일 때 사용하는 스프링: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical`, `none` 중 하나.
`spring`입력	`NuiSpring`		임의의 스프링을 `{ stiffness, damping, mass }` 형식으로 지정하며, 런타임에 CSS로 컴파일됩니다. `motion`보다 우선합니다.
`corners`입력	`NuiCorners`		모서리 모양: `round`, `squircle`, `bevel`, `scoop`, `notch`, `square` 중 하나.
`radius`입력	`NuiRadius`		모서리 크기: `none`, `small`, `medium`, `large`, `full` 중 하나.
`density`입력	`NuiDensity`		차지하는 공간: `compact`, `regular`, `roomy` 중 하나.
`itemSelected`출력	`V`		선택된 항목의 값을 내보냅니다. 루트 메뉴에서는 하위 메뉴 항목을 선택할 때도 발생합니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

nuiMenu 안의 항목입니다.

NuiMenuItem: 속성
이름	타입	기본값	설명
`value`입력	`V`		항목을 식별하는 값. 하위 메뉴를 포함한 메뉴 전체에서 고유해야 합니다.
`disabled`입력	`boolean`	`false`	항목을 비활성화합니다. 화살표 키로 이동할 수는 있지만 선택할 수는 없습니다.
`submenu`입력	`Menu`		이 항목이 여는 중첩된 `nuiMenu`.
`role`입력	`'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'`	`'menuitem'`	`menuitem`, `menuitemcheckbox`, `menuitemradio` 중 하나.
`checked`입력	`boolean \| undefined`		체크박스 항목이나 라디오 항목의 체크 상태.
`tone`입력	`'neutral' \| 'danger'`	`'neutral'`	파괴적인 작업에는 `danger`를 지정합니다.
`searchTerm`입력	`string`		문자 검색에서 비교하는 텍스트. 기본값은 항목의 레이블입니다.
`selected`출력	`V`		마우스나 키보드로 항목을 선택하면 항목의 값을 내보냅니다.

항목 그룹을 나누는 구분선입니다.

항목의 끝 쪽에 정렬되는 키보드 단축키 힌트입니다.