Needless UI

Các component

Dialog

Cửa sổ modal dựa trên phần tử dialog native, focus do trình duyệt quản lý.

Import

import-dialog.ts
import {
  NuiDialog,
  NuiDialogActions,
  NuiDialogClose,
  NuiDialogDescription,
  NuiDialogTitle,
} from '@needless-ui/angular/dialog';

NuiDialog

Biến một <dialog> native thành hộp thoại Needless UI.

Selector
dialog[nuiDialog]
Tên export
nuiDialog
TênKiểuMặc địnhMô tả
openHai chiềubooleanfalseHộp thoại có đang mở hay không. Liên kết bằng [(open)].
modalInputbooleantrueMở dưới dạng modal, có lớp nền phủ và trang phía sau không thể tương tác.
dismissibleInputbooleantruePhím Esc và cú nhấp vào nền có đóng được hộp thoại hay không.
sizeInput'sm' | 'md' | 'lg''md'Chiều rộng tối đa: sm (24rem), md (32rem) hoặc lg (44rem).
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.
closedOutputstringPhát ra giá trị trả về mỗi khi hộp thoại đóng. Giá trị rỗng nếu hộp thoại bị đóng mà không chọn gì.
closePhương thức(returnValue?: string) => voidĐóng hộp thoại, có thể kèm một giá trị trả về.

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.

NuiDialogTitle

Tiêu đề của hộp thoại. Được gán một id và trở thành aria-labelledby của hộp thoại.

Selector
[nuiDialogTitle]

NuiDialogDescription

Mô tả ngắn, được aria-describedby của hộp thoại tham chiếu tới.

Selector
[nuiDialogDescription]

NuiDialogActions

Một hàng nút ở cuối hộp thoại, căn về phía cuối dòng.

Selector
[nuiDialogActions]

NuiDialogClose

Đóng hộp thoại chứa nó khi được nhấp.

Selector
[nuiDialogClose]
TênKiểuMặc địnhMô tả
nuiDialogCloseInputstring''Giá trị đi kèm khi đóng hộp thoại, được phát ra qua (closed).