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காட்ட வேண்டிய ஹோவர்கார்டு.