PreviewCard

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { PreviewCard } from '@bigbang/ui';

Kaynak

PreviewCard.tsx

Storybook

PreviewCard · Playground

PreviewCard, @bigbang/ui paketindedir.

import { PreviewCard } from '@bigbang/ui';

<PreviewCard href="/help/refunds" preview={<RefundSummary />}>
  iade politikası
</PreviewCard>;

Özellikler

hrefZorunlu

Açıklama

Bağlantının gittiği yer. javascript: gibi güvensiz şemalar Link'teki gibi atılır.

Tür

string

childrenZorunlu

Açıklama

Bağlantı metni. Tek başına anlamlı olmalıdır: önizleme ek bilgidir ve klavyeyle girilemez.

Tür

ReactNode

previewZorunlu

Açıklama

Üzerine gelince ya da odakta gösterilen önizleme: hedefin kısa özeti. İçine işlem koymayın.

Tür

ReactNode

side

Açıklama

Kartın bağlantının hangi tarafında açılacağı; yer yoksa karşı tarafa geçer.

Tür

PopoverSide

Varsayılan

'bottom'

align

Açıklama

Bu taraf boyunca hizalama.

Tür

'center' | 'start' | 'end'

Varsayılan

'center'

size

Açıklama

Popover genişlik token'larından kart genişliği.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'sm'

delay

Açıklama

Açılmadan önce beklenecek süre, milisaniye.

Tür

number

Varsayılan

600

closeDelay

Açıklama

İşaretçi ayrıldıktan sonra kapanmadan önce beklenecek süre, milisaniye.

Tür

number

Varsayılan

300

open

Açıklama

Kontrollü açık durum. onOpenChange ile birlikte verin.

Tür

boolean

defaultOpen

Açıklama

Kontrolsüz kullanımda başlangıçtaki açık durum.

Tür

boolean

Varsayılan

false

onOpenChange

Açıklama

Kart açılınca ya da kapanınca çağrılır.

Tür

(open: boolean) => void

className

Açıklama

Yalnızca yerleşim için: kenar boşlukları ve hizalama. Rengi değiştirmek için kullanmayın.

Tür

string

Veri öznitelikleri

• data-component="preview-card": bağlantıda.
• data-part="popup" ve data-size: kartta.
• data-popup-open, data-side, data-starting-style, data-ending-style: Base UI’dan.