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दाखवायचे होव्हरकार्ड.