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ತೋರಿಸಬೇಕಾದ ಹೋವರ್‌ಕಾರ್ಡ್.