React 19 · gzip ile 8 kB · bağımlılık yok

Aracınızın
altındaki iskelet.

Kenarlarda simge rayları, tamamen size ait bir merkezin çevresinde yeniden boyutlandırılabilir bölgeler ve sayfa yenilense de kaybolmayan bir yerleşim. Altta görselleştirme yok, üstte istediğiniz gibi boyanabilir.

Örnekleri gör
Canlı çalışıyor. Yüzeyler arasındaki boşlukları sürükleyin, raydaki bir simgeye tıklayın ya da onu başka bir yarıya taşıyın, pencereyi yeniden boyutlandırın.

Başlamanın dört yolu

Her biri tarayıcınızda çalışır ve tüm kaynak kodu ekranda durur. Size en yakın olandan başlayın.

En küçük

Gerçekten çalışan en küçük iskelet. İki sütun, bir alt şerit, bir merkez — ve onu yöneten kendi başlığınız.

import { Panels, Panel } from '@pasquelin/panels'
import '@pasquelin/panels/styles.css'

<Panels<PanelId>>
  <Panel<PanelId> id="files" zone="left" title="Files">
    <FileTree />
  </Panel>

  <Panel<PanelId> id="notes" zone="right" opens={380}>
    <Notes />
  </Panel>

  <Panels.Center>
    <YourApp />
  </Panels.Center>
</Panels>

İpucu. Aynı bölgeyi ve aynı yarıyı paylaşan paneller sırayla görünür; ray aralarında geçiş yapar. İkincisine secondary yarıyı verirseniz ilkinin altına yerleşir. Burada ray simgeleri bir yarıdan diğerine sürüklenebilir de.

En küçük örneğini aç

React Router

Merkez bir çıkıştır. Gezinmek yalnızca ortayı değiştirir — sütunlar genişliğini korur, açık paneller açık kalır.

function Layout() {
  return (
    <Panels<PanelId>>
      <Panel<PanelId> id="sites" zone="left" title="Sites">
        <SiteList />
      </Panel>

      <Panels.Center>
        <Outlet />
      </Panels.Center>
    </Panels>
  )
}

İpucu. Panelleri yerleşim rotasında, çıkışın üstünde tanımlayın. Sayfa başına tanımlanırsa her gezinmede sökülür ve içindekileri kaybederler.

React Router örneğini aç

Belge sekmeleri

Merkez, belgeleri Dockview üzerinde taşır — sürüklenebilen ve bölünebilen sekmeler — paneller ise kenarlarda kalır.

import { DockviewCenter } from '@pasquelin/panels/dockview'

<Panels.Center>
  <DockviewCenter
    documents={{ editor: Editor }}
    empty={NothingOpen}
    onReady={setApi}
  />
</Panels.Center>

İpucu. dockview giriş noktasından içe aktarın; böylece ağırlığı yalnızca sekme isteyen projelere biner. Panel merkeze asla girmez: belgenin adı, panelin simgesi vardır.

Belge sekmeleri örneğini aç

Yeniden boyanmış

Aynı iskelet, dört ayrı palet. Renkler, köşe yarıçapı, ray genişliği, başlık yüksekliği — hepsi özel özellik.

.pnl-root {
  --pnl-chassis: #2e2b26;
  --pnl-panel: #1b1916;
  --pnl-accent: #d99a2b;
  --pnl-radius: 12px;
  --pnl-rail: 60px;
}

İpucu. Vurgu değişkenini herhangi bir üst öğede tanımlayın; iskelet kendi kimliğini dayatmak yerine sizinkini benimser. Daha ileri gitmek isterseniz her parça dışa aktarılmıştır ve tek tek değiştirilebilir.

Yeniden boyanmış örneğini aç

Tüm yüzey

Çok fazla değil, mesele de bu zaten. Bilinmesi gereken altı şey.

Tanımlayın

Panel bir tanımlayıcıdır: nereye asıldığı, adının ne olduğu ve ne çizdiği.

<Panel id="files" zone="left" title="Files" icon={<Icon />}>
  <FileTree />
</Panel>
Yönetin

Panellere etki etmesi gereken her başlık, kısayol ve menü için tek bir hook.

const { reveal, close, toggle, isShown } = usePanels<PanelId>()
Yeniden düzenleyin

Tek bir prop, ve okuyan kişi bir ray simgesini başka bir yarıya sürükler. Bıraktığı yer, düzenin geri kalanıyla birlikte hatırlanır.

<Panels<PanelId> draggablePanels>
React'in dışından yönetin

Store'u kendiniz oluşturun; ardından bir soket, yerel menü ya da worker bir paneli açabilir.

const store = createPanelsStore<PanelId>()
socket.on('alert', () => store.getState().show('alerts'))
Yeniden boyayın

Her değer bir özel özelliktir. Vurguyu belirleyin, raylar markanızı izlesin.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
Ya da yalnızca mantığı alın

Bileşenler hiçbir şey çizmeyen hookların üzerine kuruludur. Kendi çerçevenizi onların üstüne çizin.

const zone = useZone('left')
useContainerFit(ref)