Needless UI

Komponen

Popover

Panel mengambang di samping tombol, dan tooltip kaya konten saat hover.

Impor

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

NuiPopover

Popover native yang ditempatkan di samping elemen yang membukanya.

Selektor
[nuiPopover]
Diekspor sebagai
nuiPopover
NamaTipeDefaultDeskripsi
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Sisi pemicu tempat panel terbuka. Berpindah ke sisi lain jika tidak ada ruang.
alignInput'start' | 'center' | 'end''start'Perataan terhadap pemicu di sepanjang sisi tersebut.
offsetInputnumber8Jarak antara pemicu dan panel, dalam piksel.
arrowInputbooleanfalseMenampilkan panah yang menunjuk ke pemicu.
enterInputNuiEnterCara komponen muncul: zoom, fade, drop, rise, unfold, flip, swing, slide, atau none.
motionInputNuiMotionPegas yang menggerakkan komponen: snappy, bouncy, jelly, elastic, lazy, mechanical, atau none.
springInputNuiSpringPegas apa pun, dalam bentuk { stiffness, damping, mass }, yang dikompilasi menjadi CSS saat runtime. Menimpa motion.
cornersInputNuiCornersBentuk sudut: round, squircle, bevel, scoop, notch, atau square.
radiusInputNuiRadiusSeberapa bulat sudutnya: none, small, medium, large, atau full.
densityInputNuiDensitySeberapa banyak ruang yang digunakan komponen: compact, regular, atau roomy.
openChangeOutputbooleanTerpicu saat terbuka atau tertutup.
showMetode(anchor: HTMLElement) => voidMembukanya di samping elemen apa pun.
hideMetode() => voidMenutupnya.

Input kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiPopoverTrigger

Tombol yang membuka dan menutup popover, dengan popovertarget native.

Selektor
button[nuiPopoverTrigger]
NamaTipeDefaultDeskripsi
nuiPopoverTriggerInputNuiPopoverPopover yang akan dibuka.

NuiHovercard

Tooltip kaya konten yang mendeskripsikan pemicunya.

Selektor
[nuiHovercard]
Diekspor sebagai
nuiHovercard
NamaTipeDefaultDeskripsi
sideInput'top' | 'bottom' | 'start' | 'end''bottom'Sisi pemicu tempat kartu terbuka. Berpindah ke sisi lain jika tidak ada ruang.
alignInput'start' | 'center' | 'end''start'Perataan terhadap pemicu di sepanjang sisi tersebut.
offsetInputnumber8Jarak antara pemicu dan kartu, dalam piksel.
arrowInputbooleanfalseMenampilkan panah yang menunjuk ke pemicu.
openDelayInputnumber500Lama hover dalam milidetik sebelum kartu terbuka. Fokus keyboard langsung membukanya.
closeDelayInputnumber300Jeda dalam milidetik sebelum kartu tertutup, setelah pointer pergi.
enterInputNuiEnterCara komponen muncul: zoom, fade, drop, rise, unfold, flip, swing, slide, atau none.
motionInputNuiMotionPegas yang menggerakkan komponen: snappy, bouncy, jelly, elastic, lazy, mechanical, atau none.
springInputNuiSpringPegas apa pun, dalam bentuk { stiffness, damping, mass }, yang dikompilasi menjadi CSS saat runtime. Menimpa motion.
cornersInputNuiCornersBentuk sudut: round, squircle, bevel, scoop, notch, atau square.
radiusInputNuiRadiusSeberapa bulat sudutnya: none, small, medium, large, atau full.
densityInputNuiDensitySeberapa banyak ruang yang digunakan komponen: compact, regular, atau roomy.
openChangeOutputbooleanTerpicu saat terbuka atau tertutup.
showMetode(anchor: HTMLElement) => voidMembukanya di samping elemen apa pun.
hideMetode() => voidMenutupnya.

Input kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiHovercardTrigger

Menampilkan hovercard saat hover dan saat fokus keyboard, serta menjadikannya deskripsi elemen ini.

Selektor
[nuiHovercardTrigger]
NamaTipeDefaultDeskripsi
nuiHovercardTriggerInputNuiHovercardHovercard yang akan ditampilkan.