LivaTabPanel
DevExtreme'in TabPanel bileşeni üzerine kurulu sekme container'ı. Sekmeler
LivaTabPanelItem alt bileşeniyle bildirimsel olarak tanımlanır; her sekmeye
başlık, simge, rozet ve devre dışı durumu verilebilir.
import { LivaTabPanel, LivaTabPanelItem } from "@dataliva/livalib";
Temel Kullanım
Her LivaTabPanelItem bir sekmeyi temsil eder; sekme içeriği doğrudan
children olarak verilir.
Simge, Rozet ve Devre Dışı Sekmeler
icon prop'u DevExtreme simge adlarını kabul eder, badge sekme başlığının
yanında küçük bir rozet gösterir, disabled ise sekmeyi tıklanamaz yapar.
Kontrollü Seçim
selectedIndex ve onSelectionChanged birlikte kullanılarak aktif sekme
dışarıdan yönetilebilir. Kullanıcı sekmeye tıkladığında da state güncellenir.
Boyut
size sekme başlıklarının ölçeğini belirler: 'xxs', 'xs', 'sm', 'md',
'lg' veya 'xl'. Boyut sekmelerin iç boşluğunu, simge büyüklüğünü ve yazı
boyutunu birlikte değiştirir; sekme içeriği etkilenmez. md temanın kendi
ölçüsüyle aynıdır, prop verilmediğinde de tema varsayılanı geçerli olur.
Kullanıcı Erişilebilirlik ayarlarından bir düğme ve
sekme boyutu seçtiyse (controlSize değeri auto dışında) bu tercih uygulama
genelinde geçerli olur ve size prop'u yok sayılır.
| Prop | Tip | Varsayılan |
|---|---|---|
selectedIndex | number | 0 |
onSelectionChanged | (e: LivaTabPanelSelectionChangedEvent) => void | — |
onSelectionChanging | (e: LivaTabPanelSelectionChangingEvent) => void | — |
animationEnabled | boolean | true |
swipeEnabled | boolean | true |
focusStateEnabled | boolean | true |
fullHeight | boolean | false |
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — (tema varsayılanı, md ile aynı) |
hashRouteEnabled | boolean | — |
height | number | string | — |
width | number | string | — |
disabled | boolean | false |
className | string | '' |
children | React.ReactNode | — |
fullHeight verildiğinde panel, yüksekliği yok sayıp bulunduğu kabın tamamını
kaplar. size, Erişilebilirlik'te seçilmiş bir kontrol boyutu varsa yok
sayılır. Ayrıca DevExtreme ITabPanelOptions'tan gelen tüm prop'lar
(ör. loop, deferRendering) kullanılabilir.
LivaTabPanelItem
| Prop | Tip | Varsayılan |
|---|---|---|
title | string | — (zorunlu) |
icon | string | — |
badge | string | — |
disabled | boolean | false |
children | React.ReactNode | — |