LivaCard
İçeriği çerçeve, gölge ve dolgu ile gruplayan kart container'ı. header ve
footer alanları opsiyoneldir. Aynı dosyadan gelen LivaCardSection,
kart içinde başlıklı ve daraltılabilir bölümler oluşturur.
import { LivaCard, LivaCardSection } from "@dataliva/livalib";
Başlık ve Alt Bilgi
header ve footer herhangi bir React içeriği kabul eder; alt bilgiye buton
gibi eylemler yerleştirilebilir.
Başlık ve alt bilgi
Önizleme yükleniyor…
Görünüm Varyasyonları
withBorder çerçeveyi, elevated gölgeyi kontrol eder; padding iç boşluğu
piksel ya da CSS değeri olarak alır.
Görünüm varyasyonları
Önizleme yükleniyor…
Bölümlü Kart
LivaCardSection varsayılan olarak daraltılabilirdir (collapsible).
defaultCollapsed bölümü kapalı başlatır, headerRight başlığın sağına
özel içerik ekler.
Bölümlü kart (LivaCardSection)
Önizleme yükleniyor…
| Prop | Tip | Varsayılan |
|---|---|---|
header | React.ReactNode | — |
footer | React.ReactNode | — |
withBorder | boolean | true |
elevated | boolean | false |
padding | number | string | 16 |
footerClassName | string | '' |
footerStyle | React.CSSProperties | — |
className | string | '' |
style | React.CSSProperties | — |
children | React.ReactNode | — |
LivaCardSection
| Prop | Tip | Varsayılan |
|---|---|---|
title | React.ReactNode | — |
collapsible | boolean | true |
defaultCollapsed | boolean | false |
headerRight | React.ReactNode | — |
withBorder | boolean | true |
elevated | boolean | false |
padding | number | string | 16 |
contentClassName | string | '' |
className | string | '' |
style | React.CSSProperties | — |
children | React.ReactNode | — |