Needless UI

Komponenten

Popover

Schwebende Panels neben einem Button und reichhaltige Tooltips beim Hovern.

Import

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

NuiPopover

Ein natives Popover, platziert neben dem Element, das es geöffnet hat.

Selektor
[nuiPopover]
Exportiert als
nuiPopover
NameTypStandardwertBeschreibung
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Die Seite des Triggers, an der es sich öffnet. Fehlt der Platz, klappt es um.
alignInput'start' | 'center' | 'end''start'Wie es entlang dieser Seite am Trigger ausgerichtet ist.
offsetInputnumber8Abstand zwischen Trigger und Panel, in Pixeln.
arrowInputbooleanfalseBlendet einen Pfeil ein, der auf den Trigger zeigt.
enterInputNuiEnterWie die Komponente erscheint: zoom, fade, drop, rise, unfold, flip, swing, slide oder none.
motionInputNuiMotionDie Feder, mit der sich die Komponente bewegt: snappy, bouncy, jelly, elastic, lazy, mechanical oder none.
springInputNuiSpringEine beliebige Feder als { stiffness, damping, mass }, zur Laufzeit zu CSS kompiliert. Hat Vorrang vor motion.
cornersInputNuiCornersDie Form der Ecken: round, squircle, bevel, scoop, notch oder square.
radiusInputNuiRadiusWie groß die Ecken sind: none, small, medium, large oder full.
densityInputNuiDensityWie viel Platz die Komponente einnimmt: compact, regular oder roomy.
openChangeOutputbooleanEmittiert, wenn es sich öffnet oder schließt.
showMethode(anchor: HTMLElement) => voidÖffnet es neben einem beliebigen Element.
hideMethode() => voidSchließt es.

Anpassungs-Inputs, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiPopoverTrigger

Ein Button, der ein Popover öffnet und schließt, mit dem nativen popovertarget.

Selektor
button[nuiPopoverTrigger]
NameTypStandardwertBeschreibung
nuiPopoverTriggerInputNuiPopoverDas zu öffnende Popover.

NuiHovercard

Ein reichhaltiger Tooltip, der seinen Trigger beschreibt.

Selektor
[nuiHovercard]
Exportiert als
nuiHovercard
NameTypStandardwertBeschreibung
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Die Seite des Triggers, an der sie sich öffnet. Fehlt der Platz, klappt sie um.
alignInput'start' | 'center' | 'end''start'Wie sie entlang dieser Seite am Trigger ausgerichtet ist.
offsetInputnumber8Abstand zwischen Trigger und Karte, in Pixeln.
arrowInputbooleanfalseBlendet einen Pfeil ein, der auf den Trigger zeigt.
openDelayInputnumber500Millisekunden Hovern, bevor sie sich öffnet. Tastaturfokus öffnet sie sofort.
closeDelayInputnumber300Millisekunden bis zum Schließen, nachdem der Mauszeiger sie verlassen hat.
enterInputNuiEnterWie die Komponente erscheint: zoom, fade, drop, rise, unfold, flip, swing, slide oder none.
motionInputNuiMotionDie Feder, mit der sich die Komponente bewegt: snappy, bouncy, jelly, elastic, lazy, mechanical oder none.
springInputNuiSpringEine beliebige Feder als { stiffness, damping, mass }, zur Laufzeit zu CSS kompiliert. Hat Vorrang vor motion.
cornersInputNuiCornersDie Form der Ecken: round, squircle, bevel, scoop, notch oder square.
radiusInputNuiRadiusWie groß die Ecken sind: none, small, medium, large oder full.
densityInputNuiDensityWie viel Platz die Komponente einnimmt: compact, regular oder roomy.
openChangeOutputbooleanEmittiert, wenn sie sich öffnet oder schließt.
showMethode(anchor: HTMLElement) => voidÖffnet sie neben einem beliebigen Element.
hideMethode() => voidSchließt sie.

Anpassungs-Inputs, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiHovercardTrigger

Zeigt eine Hovercard beim Hovern und bei Tastaturfokus an und macht sie zur Beschreibung dieses Elements.

Selektor
[nuiHovercardTrigger]
NameTypStandardwertBeschreibung
nuiHovercardTriggerInputNuiHovercardDie anzuzeigende Hovercard.