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.
| 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 |
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. 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 | — |