Needless UI

Vijenzi

Popover

Paneli zinazoelea kando ya kitufe, na tooltip za kina kwa hover.

Kuingiza

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

NuiPopover

Popover asilia iliyowekwa kando ya kipengele kilichoifungua.

Kiteuzi
[nuiPopover]
Inahamishwa kama
nuiPopover
JinaAinaChaguomsingiMaelezo
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Upande wa trigger inakofunguka. Hugeukia upande mwingine pasipo nafasi.
alignInput'start' | 'center' | 'end''start'Jinsi inavyojipanga na trigger kwenye upande huo.
offsetInputnumber8Pengo kati ya trigger na paneli, kwa pikseli.
arrowInputbooleanfalseHuonyesha mshale unaoelekea trigger.
enterInputNuiEnterJinsi kinavyowasili: zoom, fade, drop, rise, unfold, flip, swing, slide au none.
motionInputNuiMotionSpringi inayoendesha mwendo wake: snappy, bouncy, jelly, elastic, lazy, mechanical au none.
springInputNuiSpringSpringi yoyote, kama { stiffness, damping, mass }, inayokusanywa kuwa CSS wakati wa utekelezaji. Inabatilisha motion.
cornersInputNuiCornersUmbo la pembe zake: round, squircle, bevel, scoop, notch au square.
radiusInputNuiRadiusUkubwa wa pembe zake: none, small, medium, large au full.
densityInputNuiDensityNafasi kinayochukua: compact, regular au roomy.
openChangeOutputbooleanHutoa tukio inapofunguka au inapofungwa.
showMbinu(anchor: HTMLElement) => voidHuifungua kando ya kipengele chochote.
hideMbinu() => voidHuifunga.

Input za ubinafsishaji usizoweka hufuata attribute ya data-nui-* iliyo karibu zaidi. Tazama mwongozo wa ubinafsishaji.

NuiPopoverTrigger

Kitufe kinachofungua na kufunga popover, kwa popovertarget asilia.

Kiteuzi
button[nuiPopoverTrigger]
JinaAinaChaguomsingiMaelezo
nuiPopoverTriggerInputNuiPopoverPopover ya kufungua.

NuiHovercard

Tooltip ya kina inayoeleza trigger yake.

Kiteuzi
[nuiHovercard]
Inahamishwa kama
nuiHovercard
JinaAinaChaguomsingiMaelezo
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Upande wa trigger inakofunguka. Hugeukia upande mwingine pasipo nafasi.
alignInput'start' | 'center' | 'end''start'Jinsi inavyojipanga na trigger kwenye upande huo.
offsetInputnumber8Pengo kati ya trigger na kadi, kwa pikseli.
arrowInputbooleanfalseHuonyesha mshale unaoelekea trigger.
openDelayInputnumber500Milisekunde za hover kabla haijafunguka. Focus ya kibodi huifungua mara moja.
closeDelayInputnumber300Milisekunde kabla haijafungwa, baada ya kielekezi kuondoka.
enterInputNuiEnterJinsi kinavyowasili: zoom, fade, drop, rise, unfold, flip, swing, slide au none.
motionInputNuiMotionSpringi inayoendesha mwendo wake: snappy, bouncy, jelly, elastic, lazy, mechanical au none.
springInputNuiSpringSpringi yoyote, kama { stiffness, damping, mass }, inayokusanywa kuwa CSS wakati wa utekelezaji. Inabatilisha motion.
cornersInputNuiCornersUmbo la pembe zake: round, squircle, bevel, scoop, notch au square.
radiusInputNuiRadiusUkubwa wa pembe zake: none, small, medium, large au full.
densityInputNuiDensityNafasi kinayochukua: compact, regular au roomy.
openChangeOutputbooleanHutoa tukio inapofunguka au inapofungwa.
showMbinu(anchor: HTMLElement) => voidHuifungua kando ya kipengele chochote.
hideMbinu() => voidHuifunga.

Input za ubinafsishaji usizoweka hufuata attribute ya data-nui-* iliyo karibu zaidi. Tazama mwongozo wa ubinafsishaji.

NuiHovercardTrigger

Huonyesha hovercard kwa hover na kwa focus ya kibodi, na huifanya kuwa maelezo ya kipengele hiki.

Kiteuzi
[nuiHovercardTrigger]
JinaAinaChaguomsingiMaelezo
nuiHovercardTriggerInputNuiHovercardHovercard ya kuonyesha.