Needless UI

Các component

Menu

Danh sách hành động dạng popup, có menu con, mục có thể đánh dấu và hỗ trợ bàn phím đầy đủ.

Import

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

NuiMenuTrigger

Mở một menu. Thường được gắn vào nuiButton.

Selector
[nuiMenuTrigger]
Tên export
nuiMenuTrigger
TênKiểuMặc địnhMô tả
nuiMenuTriggerInputMenuMenu cần mở: tham chiếu ngMenu của một nuiMenu.

NuiMenu

Menu gồm các mục, hiển thị dưới dạng popover cạnh trigger. Export ngMenu của nó chính là menu Angular Aria mà trigger và menu con nhận vào.

Selector
[nuiMenu]
Tên export
ngMenu
TênKiểuMặc địnhMô tả
wrapInputbooleantruePhím mũi tên có quay vòng từ mục cuối về mục đầu hay không.
typeaheadDelayInputnumber500Số mili giây trước khi chuỗi gõ để tìm được đặt lại.
disabledInputbooleanfalseVô hiệu hóa toàn bộ menu.
enterInputNuiEnterCách component xuất hiện: zoom, fade, drop, rise, unfold, flip, swing, slide hoặc none.
motionInputNuiMotionLò xo quyết định chuyển động của component: snappy, bouncy, jelly, elastic, lazy, mechanical hoặc none.
springInputNuiSpringMột lò xo bất kỳ, dạng { stiffness, damping, mass }, được biên dịch sang CSS lúc runtime. Ghi đè motion.
cornersInputNuiCornersHình dạng các góc: round, squircle, bevel, scoop, notch hoặc square.
radiusInputNuiRadiusMức bo góc: none, small, medium, large hoặc full.
densityInputNuiDensityLượng không gian mà component chiếm: compact, regular hoặc roomy.
itemSelectedOutputVPhát ra giá trị của mục được chọn. Trên menu gốc, output này cũng phát ra cho các mục trong menu con.

Các input tùy biến mà bạn không đặt sẽ lấy giá trị từ thuộc tính data-nui-* gần nhất. Xem hướng dẫn tùy biến.

NuiMenuItem

Một mục trong nuiMenu.

Selector
[nuiMenuItem]
TênKiểuMặc địnhMô tả
valueInputVĐịnh danh của mục. Phải là duy nhất trong toàn bộ menu, kể cả menu con.
disabledInputbooleanfalseVô hiệu hóa mục. Vẫn có thể di chuyển tới mục bằng phím mũi tên nhưng không thể chọn.
submenuInputMenuMột nuiMenu lồng bên trong mà mục này mở ra.
roleInput'menuitem' | 'menuitemcheckbox' | 'menuitemradio''menuitem'menuitem, menuitemcheckbox hoặc menuitemradio.
checkedInputboolean | undefinedTrạng thái đánh dấu của mục checkbox hoặc radio.
toneInput'neutral' | 'danger''neutral'danger cho hành động mang tính phá hủy.
searchTermInputstringVăn bản dùng để so khớp khi gõ để tìm. Mặc định là nhãn của mục.
selectedOutputVPhát ra giá trị của mục khi mục được chọn bằng chuột hoặc bàn phím.

NuiMenuSeparator

Đường kẻ phân cách giữa các nhóm mục.

Selector
[nuiMenuSeparator]

NuiMenuShortcut

Gợi ý phím tắt, căn về cuối mục.

Selector
[nuiMenuShortcut]