Needless UI

Bileşenler

Popover

Bir düğmenin yanında açılan paneller ve üzerine gelince zengin araç ipuçları.

İçe aktarma

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

NuiPopover

Onu açan öğenin yanına yerleştirilen yerel bir popover.

Seçici
[nuiPopover]
Dışa aktarma adı
nuiPopover
AdTürVarsayılanAçıklama
sideGirdi'top' | 'bottom' | 'start' | 'end''bottom'Tetikleyicinin hangi tarafında açıldığı. Yer yoksa diğer tarafa geçer.
alignGirdi'start' | 'center' | 'end''start'O taraf boyunca tetikleyiciyle nasıl hizalandığı.
offsetGirdinumber8Tetikleyici ile panel arasındaki boşluk, piksel cinsinden.
arrowGirdibooleanfalseTetikleyiciyi gösteren bir ok ekler.
enterGirdiNuiEnterBileşenin ekranda nasıl belirdiği: zoom, fade, drop, rise, unfold, flip, swing, slide veya none.
motionGirdiNuiMotionBileşenin hareketini belirleyen yay: snappy, bouncy, jelly, elastic, lazy, mechanical veya none.
springGirdiNuiSpring{ stiffness, damping, mass } biçiminde tanımlanan ve çalışma zamanında CSS’e derlenen herhangi bir yay. motion girdisini geçersiz kılar.
cornersGirdiNuiCornersKöşelerin şekli: round, squircle, bevel, scoop, notch veya square.
radiusGirdiNuiRadiusKöşelerin ne kadar yuvarlatıldığı: none, small, medium, large veya full.
densityGirdiNuiDensityBileşenin ne kadar yer kapladığı: compact, regular veya roomy.
openChangeÇıktıbooleanAçıldığında veya kapandığında tetiklenir.
showMetot(anchor: HTMLElement) => voidHerhangi bir öğenin yanında açar.
hideMetot() => voidKapatır.

Ayarlamadığınız özelleştirme girdileri, değerlerini en yakın data-nui-* niteliğinden alır. Ayrıntılar için özelleştirme kılavuzuna bakın.

NuiPopoverTrigger

Yerel popovertarget ile bir popover’ı açıp kapatan düğme.

Seçici
button[nuiPopoverTrigger]
AdTürVarsayılanAçıklama
nuiPopoverTriggerGirdiNuiPopoverAçılacak popover.

NuiHovercard

Tetikleyicisini açıklayan zengin bir araç ipucu.

Seçici
[nuiHovercard]
Dışa aktarma adı
nuiHovercard
AdTürVarsayılanAçıklama
sideGirdi'top' | 'bottom' | 'start' | 'end''bottom'Tetikleyicinin hangi tarafında açıldığı. Yer yoksa diğer tarafa geçer.
alignGirdi'start' | 'center' | 'end''start'O taraf boyunca tetikleyiciyle nasıl hizalandığı.
offsetGirdinumber8Tetikleyici ile kart arasındaki boşluk, piksel cinsinden.
arrowGirdibooleanfalseTetikleyiciyi gösteren bir ok ekler.
openDelayGirdinumber500Açılmadan önce üzerinde durulması gereken süre, milisaniye cinsinden. Klavye odağı onu hemen açar.
closeDelayGirdinumber300İşaretçi ayrıldıktan sonra kapanana kadar geçen süre, milisaniye cinsinden.
enterGirdiNuiEnterBileşenin ekranda nasıl belirdiği: zoom, fade, drop, rise, unfold, flip, swing, slide veya none.
motionGirdiNuiMotionBileşenin hareketini belirleyen yay: snappy, bouncy, jelly, elastic, lazy, mechanical veya none.
springGirdiNuiSpring{ stiffness, damping, mass } biçiminde tanımlanan ve çalışma zamanında CSS’e derlenen herhangi bir yay. motion girdisini geçersiz kılar.
cornersGirdiNuiCornersKöşelerin şekli: round, squircle, bevel, scoop, notch veya square.
radiusGirdiNuiRadiusKöşelerin ne kadar yuvarlatıldığı: none, small, medium, large veya full.
densityGirdiNuiDensityBileşenin ne kadar yer kapladığı: compact, regular veya roomy.
openChangeÇıktıbooleanAçıldığında veya kapandığında tetiklenir.
showMetot(anchor: HTMLElement) => voidHerhangi bir öğenin yanında açar.
hideMetot() => voidKapatır.

Ayarlamadığınız özelleştirme girdileri, değerlerini en yakın data-nui-* niteliğinden alır. Ayrıntılar için özelleştirme kılavuzuna bakın.

NuiHovercardTrigger

Üzerine gelindiğinde ve klavye odağında bir hovercard gösterir ve onu bu öğenin açıklaması yapar.

Seçici
[nuiHovercardTrigger]
AdTürVarsayılanAçıklama
nuiHovercardTriggerGirdiNuiHovercardGösterilecek hovercard.