Needless UI

कंपोनेंट

Popover

बटन के पास तैरते पैनल, और होवर पर रिच टूलटिप।

इम्पोर्ट

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दिखाया जाने वाला होवरकार्ड।