Needless UI

Components

Popover

Panels masu shawagi kusa da maɓalli, da tooltips masu bayani idan linzami ya zo kansu.

Shigo da shi

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

NuiPopover

Popover na asali da ake sanyawa kusa da element ɗin da ya buɗe shi.

Selector
[nuiPopover]
An fitar da shi a matsayin
nuiPopover
SunaIriNa asaliBayani
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Gefen trigger ɗin da yake buɗewa a kai. Yana juyawa idan babu wuri.
alignInput'start' | 'center' | 'end''start'Yadda yake daidaita da trigger ɗin a tsawon wannan gefe.
offsetInputnumber8Tazara tsakanin trigger da panel ɗin, a pixels.
arrowInputbooleanfalseYana nuna kibiya da ke nuni zuwa trigger ɗin.
enterInputNuiEnterYadda yake bayyana: zoom, fade, drop, rise, unfold, flip, swing, slide ko none.
motionInputNuiMotionSpring ɗin da yake motsi da shi: snappy, bouncy, jelly, elastic, lazy, mechanical ko none.
springInputNuiSpringKowane spring, a matsayin { stiffness, damping, mass }, da ake mayar da shi CSS a lokacin aiki. Yana rinjayar motion.
cornersInputNuiCornersSiffar kusurwoyinsa: round, squircle, bevel, scoop, notch ko square.
radiusInputNuiRadiusGirman kusurwoyinsa: none, small, medium, large ko full.
densityInputNuiDensityYawan sararin da yake ɗauka: compact, regular ko roomy.
openChangeOutputbooleanYana fitarwa idan ya buɗe ko ya rufe.
showMethod(anchor: HTMLElement) => voidYana buɗe shi kusa da kowane element.
hideMethod() => voidYana rufe shi.

Inputs na keɓancewa da ba ku saita ba suna bin attribute na data-nui-* mafi kusa. Ku duba jagorar keɓancewa.

NuiPopoverTrigger

Maɓallin da ke buɗe popover da rufe shi, da popovertarget na asali.

Selector
button[nuiPopoverTrigger]
SunaIriNa asaliBayani
nuiPopoverTriggerInputNuiPopoverPopover ɗin da za a buɗe.

NuiHovercard

Tooltip mai cikakken bayani da ke bayyana trigger ɗinsa.

Selector
[nuiHovercard]
An fitar da shi a matsayin
nuiHovercard
SunaIriNa asaliBayani
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Gefen trigger ɗin da yake buɗewa a kai. Yana juyawa idan babu wuri.
alignInput'start' | 'center' | 'end''start'Yadda yake daidaita da trigger ɗin a tsawon wannan gefe.
offsetInputnumber8Tazara tsakanin trigger da katin, a pixels.
arrowInputbooleanfalseYana nuna kibiya da ke nuni zuwa trigger ɗin.
openDelayInputnumber500Milliseconds da linzami zai tsaya kafin ya buɗe. Focus na allon madannai yana buɗe shi nan take.
closeDelayInputnumber300Milliseconds kafin ya rufe, bayan linzami ya bar shi.
enterInputNuiEnterYadda yake bayyana: zoom, fade, drop, rise, unfold, flip, swing, slide ko none.
motionInputNuiMotionSpring ɗin da yake motsi da shi: snappy, bouncy, jelly, elastic, lazy, mechanical ko none.
springInputNuiSpringKowane spring, a matsayin { stiffness, damping, mass }, da ake mayar da shi CSS a lokacin aiki. Yana rinjayar motion.
cornersInputNuiCornersSiffar kusurwoyinsa: round, squircle, bevel, scoop, notch ko square.
radiusInputNuiRadiusGirman kusurwoyinsa: none, small, medium, large ko full.
densityInputNuiDensityYawan sararin da yake ɗauka: compact, regular ko roomy.
openChangeOutputbooleanYana fitarwa idan ya buɗe ko ya rufe.
showMethod(anchor: HTMLElement) => voidYana buɗe shi kusa da kowane element.
hideMethod() => voidYana rufe shi.

Inputs na keɓancewa da ba ku saita ba suna bin attribute na data-nui-* mafi kusa. Ku duba jagorar keɓancewa.

NuiHovercardTrigger

Yana nuna hovercard idan linzami ya zo kansa ko focus na allon madannai, kuma yana mai da shi bayanin wannan element ɗin.

Selector
[nuiHovercardTrigger]
SunaIriNa asaliBayani
nuiHovercardTriggerInputNuiHovercardHovercard ɗin da za a nuna.