Needless UI

Componenti

Popover

Pannelli flottanti accanto a un pulsante e tooltip ricchi al passaggio del mouse.

Import

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

NuiPopover

Un popover nativo posizionato accanto all’elemento che lo ha aperto.

Selettore
[nuiPopover]
Esportato come
nuiPopover
NomeTipoPredefinitoDescrizione
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Il lato del trigger su cui si apre. Passa al lato opposto quando manca spazio.
alignInput'start' | 'center' | 'end''start'Come si allinea al trigger lungo quel lato.
offsetInputnumber8Distanza tra il trigger e il pannello, in pixel.
arrowInputbooleanfalseMostra una freccia che punta al trigger.
enterInputNuiEnterCome entra in scena: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionLa molla con cui si muove: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringQualsiasi molla, nella forma { stiffness, damping, mass }, compilata in CSS a runtime. Ha la precedenza su motion.
cornersInputNuiCornersLa forma degli angoli: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusQuanto sono grandi gli angoli: none, small, medium, large o full.
densityInputNuiDensityQuanto spazio occupa: compact, regular o roomy.
openChangeOutputbooleanEmette quando si apre o si chiude.
showMetodo(anchor: HTMLElement) => voidLo apre accanto a qualsiasi elemento.
hideMetodo() => voidLo chiude.

Gli input di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiPopoverTrigger

Un pulsante che apre e chiude un popover, con il popovertarget nativo.

Selettore
button[nuiPopoverTrigger]
NomeTipoPredefinitoDescrizione
nuiPopoverTriggerInputNuiPopoverIl popover da aprire.

NuiHovercard

Un tooltip ricco che descrive il suo trigger.

Selettore
[nuiHovercard]
Esportato come
nuiHovercard
NomeTipoPredefinitoDescrizione
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Il lato del trigger su cui si apre. Passa al lato opposto quando manca spazio.
alignInput'start' | 'center' | 'end''start'Come si allinea al trigger lungo quel lato.
offsetInputnumber8Distanza tra il trigger e la card, in pixel.
arrowInputbooleanfalseMostra una freccia che punta al trigger.
openDelayInputnumber500Millisecondi di hover prima dell’apertura. Il focus da tastiera la apre subito.
closeDelayInputnumber300Millisecondi prima della chiusura, dopo che il puntatore è uscito.
enterInputNuiEnterCome entra in scena: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionLa molla con cui si muove: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringQualsiasi molla, nella forma { stiffness, damping, mass }, compilata in CSS a runtime. Ha la precedenza su motion.
cornersInputNuiCornersLa forma degli angoli: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusQuanto sono grandi gli angoli: none, small, medium, large o full.
densityInputNuiDensityQuanto spazio occupa: compact, regular o roomy.
openChangeOutputbooleanEmette quando si apre o si chiude.
showMetodo(anchor: HTMLElement) => voidLa apre accanto a qualsiasi elemento.
hideMetodo() => voidLa chiude.

Gli input di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiHovercardTrigger

Mostra una hovercard al passaggio del mouse e con il focus da tastiera, e ne fa la descrizione di questo elemento.

Selettore
[nuiHovercardTrigger]
NomeTipoPredefinitoDescrizione
nuiHovercardTriggerInputNuiHovercardLa hovercard da mostrare.