Bileşenler
InfoPopover
Bir etiketin ya da değerin yanında, basınca kısa bir açıklama açan küçük bilgi butonu.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Kurulum
Bölüm başlığı “Kurulum”- Paket
@bigbang/ui- İçe aktarma
import { InfoPopover } from '@bigbang/ui';- Kaynak
- InfoPopover.tsx
- Storybook
- InfoPopover · Playground
InfoPopover, @bigbang/ui paketindedir.
import { InfoPopover } from '@bigbang/ui';
<InfoPopover label="Alan etiketi hakkında" title="Alan etiketi"> Kısa açıklama.</InfoPopover>;Özellikler
Bölüm başlığı “Özellikler”childrenZorunlu- Açıklama
- Basınca gösterilen açıklama: birkaç cümle ve en fazla bir bağlantı.
- Tür
ReactNode
label- Açıklama
- Bilgi butonunun adı; neyi açıkladığını söyler, ör. "Alan etiketi hakkında". Varsayılanı
ui.infoPopover.labelkütüphane metnidir ("Daha fazla bilgi" ya da "More information"). - Tür
string
title- Açıklama
- Panelin içindeki başlık. Verilmezse panel
labelile adlandırılır. - Tür
ReactNode
side- Açıklama
- Panelin butonun hangi yanında açılacağı; yer yoksa ters yana geçer.
- Tür
PopoverSide- Varsayılan
'top'
icon- Açıklama
- Butondaki ikon: açıklama için
info, alanın nasıl doldurulacağına yardım içincircle-help. - Tür
'info' | 'circle-help'- Varsayılan
'info'
Veri öznitelikleri
Bölüm başlığı “Veri öznitelikleri”data-component="info-popover": panel üzerinde; butondata-component="icon-button".