Needless UI

元件

Popover

在按鈕旁浮現的面板，以及滑鼠懸停時出現、內容豐富的工具提示。

匯入

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

NuiPopover

原生 popover，放在開啟它的元素旁邊。

選擇器
[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 開啟和關閉 Popover 的按鈕。

選擇器
button[nuiPopoverTrigger]
名稱型別預設值說明
nuiPopoverTrigger輸入NuiPopover要開啟的 Popover。

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要顯示的懸停卡片。