API của Popover · Needless UI

Import

import-popover.ts

import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

NuiPopover

Một popover native được đặt cạnh phần tử đã mở nó.

Selector: [nuiPopover]
Tên export: nuiPopover

NuiPopover: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Phía của trigger mà nó mở ra. Tự lật khi không đủ chỗ.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Cách nó căn với trigger dọc theo phía đó.
`offset`Input	`number`	`8`	Khoảng cách giữa trigger và bảng, tính bằng pixel.
`arrow`Input	`boolean`	`false`	Hiển thị mũi tên trỏ về trigger.
`enter`Input	`NuiEnter`		Cách component xuất hiện: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` hoặc `none`.
`motion`Input	`NuiMotion`		Lò xo quyết định chuyển động của component: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` hoặc `none`.
`spring`Input	`NuiSpring`		Một lò xo bất kỳ, dạng `{ stiffness, damping, mass }`, được biên dịch sang CSS lúc runtime. Ghi đè `motion`.
`corners`Input	`NuiCorners`		Hình dạng các góc: `round`, `squircle`, `bevel`, `scoop`, `notch` hoặc `square`.
`radius`Input	`NuiRadius`		Mức bo góc: `none`, `small`, `medium`, `large` hoặc `full`.
`density`Input	`NuiDensity`		Lượng không gian mà component chiếm: `compact`, `regular` hoặc `roomy`.
`openChange`Output	`boolean`		Phát ra khi nó mở hoặc đóng.
`show`Phương thức	`(anchor: HTMLElement) => void`		Mở nó cạnh một phần tử bất kỳ.
`hide`Phương thức	`() => void`		Đóng nó.

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.

NuiPopoverTrigger

Một nút mở và đóng popover, bằng popovertarget native.

Selector: button[nuiPopoverTrigger]

NuiPopoverTrigger: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`nuiPopoverTrigger`Input	`NuiPopover`		Popover cần mở.

NuiHovercard

Một tooltip nâng cao mô tả trigger của nó.

Selector: [nuiHovercard]
Tên export: nuiHovercard

NuiHovercard: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Phía của trigger mà nó mở ra. Tự lật khi không đủ chỗ.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	Cách nó căn với trigger dọc theo phía đó.
`offset`Input	`number`	`8`	Khoảng cách giữa trigger và thẻ, tính bằng pixel.
`arrow`Input	`boolean`	`false`	Hiển thị mũi tên trỏ về trigger.
`openDelay`Input	`number`	`500`	Số mili giây di chuột qua trước khi nó mở. Focus từ bàn phím mở nó ngay lập tức.
`closeDelay`Input	`number`	`300`	Số mili giây trước khi nó đóng, sau khi con trỏ đã rời đi.
`enter`Input	`NuiEnter`		Cách component xuất hiện: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` hoặc `none`.
`motion`Input	`NuiMotion`		Lò xo quyết định chuyển động của component: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` hoặc `none`.
`spring`Input	`NuiSpring`		Một lò xo bất kỳ, dạng `{ stiffness, damping, mass }`, được biên dịch sang CSS lúc runtime. Ghi đè `motion`.
`corners`Input	`NuiCorners`		Hình dạng các góc: `round`, `squircle`, `bevel`, `scoop`, `notch` hoặc `square`.
`radius`Input	`NuiRadius`		Mức bo góc: `none`, `small`, `medium`, `large` hoặc `full`.
`density`Input	`NuiDensity`		Lượng không gian mà component chiếm: `compact`, `regular` hoặc `roomy`.
`openChange`Output	`boolean`		Phát ra khi nó mở hoặc đóng.
`show`Phương thức	`(anchor: HTMLElement) => void`		Mở nó cạnh một phần tử bất kỳ.
`hide`Phương thức	`() => void`		Đóng nó.

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.

NuiHovercardTrigger

Hiển thị hovercard khi di chuột qua và khi nhận focus từ bàn phím, đồng thời biến nó thành phần mô tả của phần tử này.

Selector: [nuiHovercardTrigger]

NuiHovercardTrigger: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`nuiHovercardTrigger`Input	`NuiHovercard`		Hovercard cần hiển thị.