Needless UI

Composants

Popover

Des panneaux flottants à côté d’un bouton, et des infobulles riches au survol.

Import

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

NuiPopover

Un popover natif placé à côté de l’élément qui l’a ouvert.

Sélecteur
[nuiPopover]
Exporté sous
nuiPopover
NomTypePar défautDescription
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Le côté du déclencheur où il s’ouvre. Il bascule quand la place manque.
alignInput'start' | 'center' | 'end''start'Son alignement sur le déclencheur, le long de ce côté.
offsetInputnumber8Écart entre le déclencheur et le panneau, en pixels.
arrowInputbooleanfalseAffiche une flèche qui pointe vers le déclencheur.
enterInputNuiEnterSon entrée en scène : zoom, fade, drop, rise, unfold, flip, swing, slide ou none.
motionInputNuiMotionLe ressort qui l’anime : snappy, bouncy, jelly, elastic, lazy, mechanical ou none.
springInputNuiSpringN’importe quel ressort, sous la forme { stiffness, damping, mass }, compilé en CSS à l’exécution. Il a priorité sur motion.
cornersInputNuiCornersLa forme de ses coins : round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusLa taille de ses coins : none, small, medium, large ou full.
densityInputNuiDensityLa place qu’il occupe : compact, regular ou roomy.
openChangeOutputbooleanÉmet à l’ouverture et à la fermeture.
showMéthode(anchor: HTMLElement) => voidL’ouvre à côté de n’importe quel élément.
hideMéthode() => voidLe ferme.

Les inputs de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

NuiPopoverTrigger

Un bouton qui ouvre et ferme un popover, avec le popovertarget natif.

Sélecteur
button[nuiPopoverTrigger]
NomTypePar défautDescription
nuiPopoverTriggerInputNuiPopoverLe popover à ouvrir.

NuiHovercard

Une infobulle riche qui décrit son déclencheur.

Sélecteur
[nuiHovercard]
Exporté sous
nuiHovercard
NomTypePar défautDescription
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Le côté du déclencheur où elle s’ouvre. Elle bascule quand la place manque.
alignInput'start' | 'center' | 'end''start'Son alignement sur le déclencheur, le long de ce côté.
offsetInputnumber8Écart entre le déclencheur et la carte, en pixels.
arrowInputbooleanfalseAffiche une flèche qui pointe vers le déclencheur.
openDelayInputnumber500Millisecondes de survol avant l’ouverture. Le focus clavier l’ouvre immédiatement.
closeDelayInputnumber300Millisecondes avant la fermeture, une fois que le pointeur est parti.
enterInputNuiEnterSon entrée en scène : zoom, fade, drop, rise, unfold, flip, swing, slide ou none.
motionInputNuiMotionLe ressort qui l’anime : snappy, bouncy, jelly, elastic, lazy, mechanical ou none.
springInputNuiSpringN’importe quel ressort, sous la forme { stiffness, damping, mass }, compilé en CSS à l’exécution. Il a priorité sur motion.
cornersInputNuiCornersLa forme de ses coins : round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusLa taille de ses coins : none, small, medium, large ou full.
densityInputNuiDensityLa place qu’il occupe : compact, regular ou roomy.
openChangeOutputbooleanÉmet à l’ouverture et à la fermeture.
showMéthode(anchor: HTMLElement) => voidL’ouvre à côté de n’importe quel élément.
hideMéthode() => voidLa ferme.

Les inputs de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

NuiHovercardTrigger

Affiche une hovercard au survol et au focus clavier, et en fait la description de cet élément.

Sélecteur
[nuiHovercardTrigger]
NomTypePar défautDescription
nuiHovercardTriggerInputNuiHovercardLa hovercard à afficher.