Needless UI

คอมโพเนนต์

Popover

แผงลอยข้างปุ่ม และ tooltip แบบละเอียดที่แสดงเมื่อชี้เมาส์

Import

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

NuiPopover

popover แบบเนทีฟที่วางไว้ข้างเอลิเมนต์ที่เปิดมัน

Selector
[nuiPopover]
Export เป็น
nuiPopover
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
sideInput'top' | 'bottom' | 'start' | 'end''bottom'ด้านของทริกเกอร์ที่จะเปิด และจะพลิกด้านเมื่อพื้นที่ไม่พอ
alignInput'start' | 'center' | 'end''start'การจัดแนวให้ตรงกับทริกเกอร์ตามด้านนั้น
offsetInputnumber8ระยะห่างระหว่างทริกเกอร์กับแผง หน่วยเป็นพิกเซล
arrowInputbooleanfalseแสดงลูกศรที่ชี้ไปยังทริกเกอร์
enterInputNuiEnterลักษณะการปรากฏ: zoom fade drop rise unfold flip swing slide หรือ none
motionInputNuiMotionสปริงที่ใช้ในการเคลื่อนไหว: snappy bouncy jelly elastic lazy mechanical หรือ none
springInputNuiSpringสปริงแบบใดก็ได้ในรูป { stiffness, damping, mass } ซึ่งจะคอมไพล์เป็น CSS ขณะรันไทม์ และใช้แทน motion
cornersInputNuiCornersรูปทรงของมุม: round squircle bevel scoop notch หรือ square
radiusInputNuiRadiusขนาดของมุม: none small medium large หรือ full
densityInputNuiDensityพื้นที่ที่ใช้: compact regular หรือ roomy
openChangeOutputbooleanส่งค่าออกมาเมื่อเปิดหรือปิด
showเมธอด(anchor: HTMLElement) => voidเปิดข้างเอลิเมนต์ใดก็ได้
hideเมธอด() => voidปิด Popover

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiPopoverTrigger

ปุ่มที่เปิดและปิด Popover ด้วย popovertarget แบบเนทีฟ

Selector
button[nuiPopoverTrigger]
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
nuiPopoverTriggerInputNuiPopoverPopover ที่จะเปิด

NuiHovercard

tooltip แบบละเอียดที่อธิบายทริกเกอร์ของตน

Selector
[nuiHovercard]
Export เป็น
nuiHovercard
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
sideInput'top' | 'bottom' | 'start' | 'end''bottom'ด้านของทริกเกอร์ที่จะเปิด และจะพลิกด้านเมื่อพื้นที่ไม่พอ
alignInput'start' | 'center' | 'end''start'การจัดแนวให้ตรงกับทริกเกอร์ตามด้านนั้น
offsetInputnumber8ระยะห่างระหว่างทริกเกอร์กับการ์ด หน่วยเป็นพิกเซล
arrowInputbooleanfalseแสดงลูกศรที่ชี้ไปยังทริกเกอร์
openDelayInputnumber500จำนวนมิลลิวินาทีที่ต้องชี้เมาส์ค้างไว้ก่อนจะเปิด ส่วนการโฟกัสด้วยคีย์บอร์ดจะเปิดทันที
closeDelayInputnumber300จำนวนมิลลิวินาทีก่อนจะปิด หลังจากตัวชี้ออกไปแล้ว
enterInputNuiEnterลักษณะการปรากฏ: zoom fade drop rise unfold flip swing slide หรือ none
motionInputNuiMotionสปริงที่ใช้ในการเคลื่อนไหว: snappy bouncy jelly elastic lazy mechanical หรือ none
springInputNuiSpringสปริงแบบใดก็ได้ในรูป { stiffness, damping, mass } ซึ่งจะคอมไพล์เป็น CSS ขณะรันไทม์ และใช้แทน motion
cornersInputNuiCornersรูปทรงของมุม: round squircle bevel scoop notch หรือ square
radiusInputNuiRadiusขนาดของมุม: none small medium large หรือ full
densityInputNuiDensityพื้นที่ที่ใช้: compact regular หรือ roomy
openChangeOutputbooleanส่งค่าออกมาเมื่อเปิดหรือปิด
showเมธอด(anchor: HTMLElement) => voidเปิดข้างเอลิเมนต์ใดก็ได้
hideเมธอด() => voidปิด Hovercard

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiHovercardTrigger

แสดง Hovercard เมื่อชี้เมาส์และเมื่อโฟกัสด้วยคีย์บอร์ด และใช้ Hovercard เป็นคำอธิบายของเอลิเมนต์นี้

Selector
[nuiHovercardTrigger]
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
nuiHovercardTriggerInputNuiHovercardHovercard ที่จะแสดง