Popover API · Needless UI

ఇంపోర్ట్

import-popover.ts

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

NuiPopover

తనను తెరిచిన ఎలిమెంట్ పక్కన ఉంచే నేటివ్ పాపోవర్.

సెలెక్టర్: [nuiPopover]
ఎక్స్‌పోర్ట్ పేరు: nuiPopover

NuiPopover: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`side`ఇన్‌పుట్	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	ఇది తెరుచుకునే ట్రిగ్గర్ వైపు. స్థలం లేకపోతే అవతలి వైపుకు తిరుగుతుంది.
`align`ఇన్‌పుట్	`'start' \| 'center' \| 'end'`	`'start'`	ఆ వైపు వెంబడి ట్రిగ్గర్‌తో ఇది ఎలా అలైన్ అవుతుందో.
`offset`ఇన్‌పుట్	`number`	`8`	ట్రిగ్గర్‌కు, ప్యానెల్‌కు మధ్య ఖాళీ, పిక్సెల్‌లలో.
`arrow`ఇన్‌పుట్	`boolean`	`false`	ట్రిగ్గర్ వైపు చూపే బాణాన్ని చూపిస్తుంది.
`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: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`nuiPopoverTrigger`ఇన్‌పుట్	`NuiPopover`		తెరవాల్సిన పాపోవర్.

NuiHovercard

తన ట్రిగ్గర్‌ను వివరించే వివరమైన టూల్‌టిప్.

సెలెక్టర్: [nuiHovercard]
ఎక్స్‌పోర్ట్ పేరు: nuiHovercard

NuiHovercard: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`side`ఇన్‌పుట్	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	ఇది తెరుచుకునే ట్రిగ్గర్ వైపు. స్థలం లేకపోతే అవతలి వైపుకు తిరుగుతుంది.
`align`ఇన్‌పుట్	`'start' \| 'center' \| 'end'`	`'start'`	ఆ వైపు వెంబడి ట్రిగ్గర్‌తో ఇది ఎలా అలైన్ అవుతుందో.
`offset`ఇన్‌పుట్	`number`	`8`	ట్రిగ్గర్‌కు, కార్డ్‌కు మధ్య ఖాళీ, పిక్సెల్‌లలో.
`arrow`ఇన్‌పుట్	`boolean`	`false`	ట్రిగ్గర్ వైపు చూపే బాణాన్ని చూపిస్తుంది.
`openDelay`ఇన్‌పుట్	`number`	`500`	తెరుచుకునే ముందు ఎన్ని మిల్లీసెకన్ల హోవర్ కావాలో. కీబోర్డ్ ఫోకస్ దాన్ని వెంటనే తెరుస్తుంది.
`closeDelay`ఇన్‌పుట్	`number`	`300`	పాయింటర్ వెళ్లిపోయాక, మూసుకునే ముందు ఆగే మిల్లీసెకన్లు.
`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`		దీన్ని మూసివేస్తుంది.

NuiHovercardTrigger

హోవర్‌పై, కీబోర్డ్ ఫోకస్‌పై హోవర్‌కార్డ్‌ను చూపించి, దాన్ని ఈ ఎలిమెంట్ వివరణగా చేస్తుంది.

సెలెక్టర్: [nuiHovercardTrigger]

NuiHovercardTrigger: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`nuiHovercardTrigger`ఇన్‌పుట్	`NuiHovercard`		చూపించాల్సిన హోవర్‌కార్డ్.