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表示するホバーカード。