Popover

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Popover.tsx

Storybook

Popover · Playground

Popover, @bigbang/ui paketindedir.

import { Button, Popover } from '@bigbang/ui';

<Popover trigger={<Button variant="secondary">Görünümü düzenle</Button>} title="Görünüm">
  İçerik
</Popover>;

Parça prop tipleri de dışa açılır: PopoverCloseProps.

Özellikler

triggerZorunlu

Açıklama

Basınca paneli açan öğe, genellikle bir Button. Zorunlu: açılır panel her zaman bir tetikleyiciye bağlıdır.

Tür

ReactElement

titleZorunlu

Açıklama

Panele ekran okuyucu için ad veren kısa başlık.

Tür

ReactNode

description

Açıklama

Başlığın altında bir cümle; başlıkla birlikte okunur.

Tür

ReactNode

children

Açıklama

Etkileşimli içerik: alanlar, onay kutuları, kısa bir eylem listesi. Açılınca odak ilk denetime gider.

Tür

ReactNode

side

Açıklama

Panelin tetikleyicinin hangi yanında açılacağı; inline-start ve inline-end yazı yönünü izler. Yer yoksa ters yana geçer.

Tür

PopoverSide

Varsayılan

'bottom'

align

Açıklama

O yan boyunca hizalama.

Tür

'start' | 'center' | 'end'

Varsayılan

'center'

size

Açıklama

Panel genişliği: 240, 320 ya da 400 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

arrow

Açıklama

Tetikleyiciyi gösteren bir ok çizer. Birbirine yakın birden çok tetikleyici varsa kullanın.

Tür

boolean

Varsayılan

false

modal

Açıklama

Panel açıkken sayfayı etkisiz yapar ve odağı içeride tutar. Çoğu panelde kapalı bırakın; içerik bitirilmeden devam edilmemesi gerekiyorsa açın.

Tür

boolean

Varsayılan

false

open

Açıklama

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

Tür

boolean

defaultOpen

Açıklama

Panel kontrolsüz kullanıldığında ilk çizimdeki açık durum.

Tür

boolean

Varsayılan

false

onOpenChange

Açıklama

Tetikleyiciye basma, Escape, dışarı tıklama ya da Popover.Close ile yeni açık durumla çağrılır.

Tür

(open: boolean) => void

material

Açıklama

'solid', cam bir Provider altında bu paneli opak tutar. Panel tablo ya da üçten fazla alanlı bir form gibi yoğun içerik taşıyorsa kullanın.

Tür

'auto' | 'solid'

Varsayılan

'auto'

Parçalar

• Popover.Close: tek bir Button’ı sarar ve basılınca paneli kapatır.

Veri öznitelikleri

• data-component="popover", data-size: panel üzerinde.
• data-part: header, body, arrow.
• data-side, data-align, data-open, data-starting-style, data-ending-style: Base UI’dan.