Needless UI

Mga component

Popover

Mga lumulutang na panel sa tabi ng button, at mga rich tooltip sa hover.

Import

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

NuiPopover

Isang native na popover na inilalagay sa tabi ng element na nagbukas dito.

Selector
[nuiPopover]
Naka-export bilang
nuiPopover
PangalanUriDefaultPaglalarawan
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Ang gilid ng trigger kung saan ito bumubukas. Lumilipat ito sa kabila kapag walang puwang.
alignInput'start' | 'center' | 'end''start'Kung paano ito pumapantay sa trigger sa gilid na iyon.
offsetInputnumber8Agwat sa pagitan ng trigger at ng panel, sa pixel.
arrowInputbooleanfalseNagpapakita ng arrow na nakaturo sa trigger.
enterInputNuiEnterKung paano ito lumilitaw: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionAng spring na nagpapagalaw sa component: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringKahit anong spring, bilang { stiffness, damping, mass }, na kino-compile sa CSS sa runtime. Ino-override nito ang motion.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
openChangeOutputbooleanNagfa-fire kapag bumukas o nagsara ito.
showMethod(anchor: HTMLElement) => voidBinubuksan ito sa tabi ng kahit anong element.
hideMethod() => voidIsinasara ito.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiPopoverTrigger

Isang button na nagbubukas at nagsasara ng popover, gamit ang native na popovertarget.

Selector
button[nuiPopoverTrigger]
PangalanUriDefaultPaglalarawan
nuiPopoverTriggerInputNuiPopoverAng popover na bubuksan.

NuiHovercard

Isang rich tooltip na naglalarawan sa trigger nito.

Selector
[nuiHovercard]
Naka-export bilang
nuiHovercard
PangalanUriDefaultPaglalarawan
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Ang gilid ng trigger kung saan ito bumubukas. Lumilipat ito sa kabila kapag walang puwang.
alignInput'start' | 'center' | 'end''start'Kung paano ito pumapantay sa trigger sa gilid na iyon.
offsetInputnumber8Agwat sa pagitan ng trigger at ng card, sa pixel.
arrowInputbooleanfalseNagpapakita ng arrow na nakaturo sa trigger.
openDelayInputnumber500Ilang millisecond ng hover bago ito bumukas. Agad itong binubuksan ng keyboard focus.
closeDelayInputnumber300Ilang millisecond bago ito magsara, pagkaalis ng pointer.
enterInputNuiEnterKung paano ito lumilitaw: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionAng spring na nagpapagalaw sa component: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringKahit anong spring, bilang { stiffness, damping, mass }, na kino-compile sa CSS sa runtime. Ino-override nito ang motion.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
openChangeOutputbooleanNagfa-fire kapag bumukas o nagsara ito.
showMethod(anchor: HTMLElement) => voidBinubuksan ito sa tabi ng kahit anong element.
hideMethod() => voidIsinasara ito.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiHovercardTrigger

Nagpapakita ng hovercard sa hover at sa keyboard focus, at ginagawa itong description ng element na ito.

Selector
[nuiHovercardTrigger]
PangalanUriDefaultPaglalarawan
nuiHovercardTriggerInputNuiHovercardAng hovercard na ipapakita.