Needless UI

组件

弹出框

在按钮旁浮出的面板，以及悬停时出现、内容丰富的工具提示。

导入

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

NuiPopover

原生弹出框，放置在打开它的元素旁边。

选择器
[nuiPopover]
导出为
nuiPopover
名称类型默认值说明
side输入'top' | 'bottom' | 'start' | 'end''bottom'在触发器的哪一侧打开。空间不足时会翻转。
align输入'start' | 'center' | 'end''start'沿该侧与触发器的对齐方式。
offset输入number8触发器与面板之间的间距，单位为像素。
arrow输入booleanfalse显示一个指向触发器的箭头。
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。
openChange输出boolean打开或关闭时发出。
show方法(anchor: HTMLElement) => void在任意元素旁边打开它。
hide方法() => void关闭它。

用于自定义的输入属性如果未设置，会沿用最近的 data-nui-* 属性。详见自定义指南。

NuiPopoverTrigger

通过原生 popovertarget 打开和关闭弹出框的按钮。

选择器
button[nuiPopoverTrigger]
名称类型默认值说明
nuiPopoverTrigger输入NuiPopover要打开的弹出框。

NuiHovercard

描述其触发器的、内容丰富的工具提示。

选择器
[nuiHovercard]
导出为
nuiHovercard
名称类型默认值说明
side输入'top' | 'bottom' | 'start' | 'end''bottom'在触发器的哪一侧打开。空间不足时会翻转。
align输入'start' | 'center' | 'end''start'沿该侧与触发器的对齐方式。
offset输入number8触发器与卡片之间的间距，单位为像素。
arrow输入booleanfalse显示一个指向触发器的箭头。
openDelay输入number500悬停多少毫秒后打开。通过键盘获得焦点时会立即打开。
closeDelay输入number300指针离开后，经过多少毫秒关闭。
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。
openChange输出boolean打开或关闭时发出。
show方法(anchor: HTMLElement) => void在任意元素旁边打开它。
hide方法() => void关闭它。

用于自定义的输入属性如果未设置，会沿用最近的 data-nui-* 属性。详见自定义指南。

NuiHovercardTrigger

在悬停和键盘聚焦时显示悬停卡片，并将其设为此元素的描述。

选择器
[nuiHovercardTrigger]
名称类型默认值说明
nuiHovercardTrigger输入NuiHovercard要显示的悬停卡片。