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ਦਿਖਾਇਆ ਜਾਣ ਵਾਲਾ ਹੋਵਰਕਾਰਡ।