LivaDrawer

Ekranın sağ ya da sol kenarından kayarak açılan ayrıntı paneli. Bir grid satırının, bildirimin ya da kaydın ayrıntısını sayfadan ayrılmadan göstermek için kullanılır. Panel üç bölgeden oluşur: başlık (rozetler, başlık, alt başlık, geri ve kapat düğmeleri), kendi içinde kayan gövde ve isteğe bağlı alt bilgi. Gövdeyi düzenlemek için aynı dosyadan gelen LivaDrawerSection, LivaDrawerMeta ve LivaDrawerMetaItem kullanılır.

import {
  LivaDrawer,
  LivaDrawerSection,
  LivaDrawerMeta,
  LivaDrawerMetaItem,
} from "@dataliva/livalib";

1.1.2'de değişti: LivaDrawer önceden sayfa içeriğini saran bir DevExtreme Drawer sarmalayıcısıydı (drawerContent, variant, size…). 1.1.2'den itibaren sayfayı sarmayan, pencereye sabitlenen bir ayrıntı panelidir.

Temel kullanım

Panel denetimlidir: visible açık olup olmadığını belirler, kullanıcı kapatmak istediğinde (kapat düğmesi, ESC, dışarı tıklama) onClose çağrılır ve visible'ı false yapmak sizin işinizdir. badges başlığın üstünde bir rozet satırı, subtitle başlığın altında soluk bir satır çizer. footer verilirse gövdenin altına sağa yaslı, üst çizgili bir eylem şeridi eklenir; verilmezse hiç çizilmez.

Panel portalda, pencereye sabitlenmiş olarak açılır: yükseklik her zaman pencerenin tamamıdır, width (varsayılan 520 px) ise dar ekranda pencere genişliğine iner. width pencereden geniş ya da ona eşitse panel ekranı tamamen kaplar ve köşeleri keskinleşir. Gövde kendi içinde kayar; başlık ve alt bilgi yerinde kalır.

Bölüm ve etiket–değer listesi

Gövde, çocukları arasında 20px boşluk bırakan dikey bir akıştır; içine istediğiniz JSX'i koyabilirsiniz. Tutarlı bir ayrıntı görünümü için:

• LivaDrawerSection küçük, büyük harfli, soluk bir başlıkla bir bölüm açar. actions başlık satırının sağına küçük düğmeler (Kopyala, Tümünü göster…) koyar. title ve actions ikisi de yoksa başlık satırı çizilmez.
• LivaDrawerMeta iki kolonlu bir etiket–değer listesidir (<dl>). Etiket kolonu varsayılan 128px'tir; labelWidth sayı (piksel) ya da CSS değeri alır. 768px ve altındaki ekranlarda etiket değerin üstüne iner.
• LivaDrawerMetaItem listenin bir satırıdır; LivaDrawerMeta'nın doğrudan çocuğu olmalıdır (kendi sarmalayıcısı yoktur, <dt> + <dd> çizer). hideEmpty varsayılan olarak açıktır: değeri null, undefined, "" ya da false olan satır hiç çizilmez; 0 ise gösterilir. Böylece opsiyonel alanlar için koşul yazmanız gerekmez.

Bu parçalar renklerini panelin CSS değişkenlerinden alır; panelin dışında kullanılmak üzere tasarlanmamıştır.

Panel içi gezinme ve başlık aksiyonları

onBack verildiğinde başlığın en üstünde "Geri" düğmesi çıkar; aynı panelde ilgili bir kayda geçip geri dönmek için kullanılır. Gösterilen kayıtları bir yığında tutup yığında birden fazla kayıt varken onBack verin. Düğme metni backText ile, kapat düğmesinin erişilebilir adı (aria-label ve title) closeText ile değiştirilir. headerActions kapat düğmesinin soluna ek düğmeler yerleştirir.

Kapanış animasyonu (~180 ms) süresince panel içeriğini çizmeye devam eder. onClose'ta içeriği besleyen veriyi (seçili kayıt, yığın) hemen silerseniz panel boş kayar; örnekteki gibi yalnız görünürlüğü kapatıp veriyi bir sonraki açılışta yenileyin.

Konum ve kapanma davranışı

position="left" paneli sol kenara yaslar (varsayılan 'right'); köşe yuvarlaklığı ve gölge her zaman sayfaya bakan kenardadır. Varsayılan olarak sayfa karartılır (shading, shadingColor) ve dışarı tıklamak paneli kapatır (closeOnOutsideClick).

• ESC: closeOnEscape açıkken (varsayılan) panel açık olduğu sürece pencere düzeyinde bir dinleyici ESC'de onClose çağırır. Odak panelin dışındayken de (ör. bir grid satırına tıklayıp paneli açtığınızda) çalışır. closeOnEscape={false} bu dinleyiciyi kaldırır; ancak odak doğrudan panel kutusundayken DevExtreme Popup'ın yerleşik Escape kısayolu paneli yine kapatabilir.
• onClose birden fazla çağrılabilir: Panel DevExtreme Popup'ın onHiding olayına bağlıdır; bu olay panel hangi yoldan gizlenirse gizlensin (visible'ı false yapmanız dahil) tetiklenir. Kapat düğmesine basıldığında onClose önce düğmeden, sonra gizlenirken bir kez daha çağrılır. Bu yüzden onClose'a yalnız durumu kapatan, tekrar çağrılmasında sakınca olmayan bir işlev verin (ör. navigate(-1) gibi bir yan etki değil).

Stil: portal ve CSS değişkenleri

Panel, DevExtreme Popup üzerinden portalda (sayfa ağacının dışında, belge gövdesinde) render olur. Bu yüzden sayfa kapsayıcınızda tanımladığınız CSS değişkenleri panel içeriğine ulaşmaz ve var() sessizce geçersiz kalır. İçerikte kullandığınız değişkenleri className ile verdiğiniz panel köküne de tanımlayın:

/* Sayfa.module.css */
.page,
.sheet {
  --durum-basarili: #16a34a;
  --durum-hata: #dc2626;
}

<div className={styles.page}>…</div>

<LivaDrawer visible={open} onClose={close} className={styles.sheet}>
  …
</LivaDrawer>

className panel kökünü (başlık + gövde + alt bilgi), bodyClassName yalnız kayan gövdeyi hedefler.

Köşe yarıçapları temanın --dx-border-radius değerine orantılıdır: panel 3.5× (4px temada 14px), kapat düğmesi 2.25× (9px). Tema köşeleri keskinleştirirse panel de keskinleşir. Panel ayrıca içeriğin kullanabileceği şu değişkenleri tanımlar: --liva-drawer-surface, --liva-drawer-subtle, --liva-drawer-muted, --liva-drawer-border, --liva-drawer-primary (hepsi --dx-color-* tema değişkenlerinden türetilir) ve yatay iç boşluk için --liva-drawer-padding-x (20px, 768px ve altında 16px).

DevExtreme Popup ya da LivaPopup seçenekleri aktarılmaz; yalnız yukarıdaki prop'lar kabul edilir.

LivaDrawerSection

LivaDrawerMeta

LivaDrawerMetaItem