आपके औज़ार के
नीचे का ढाँचा।

शुरू करने के चार रास्ते

हर उदाहरण आपके ब्राउज़र में चलता है और उसका पूरा कोड सामने है। जो आपकी ज़रूरत के सबसे करीब हो, वहीं से शुरू करें।

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>

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

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

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

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

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

पूरा API

बहुत कुछ नहीं है, और यही बात है। जानने लायक छह चीज़ें।

घोषित करें

पैनल एक विवरण है: वह कहाँ लगेगा, उसका नाम क्या है, वह क्या दिखाता है।

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

चलाएँ

हर उस हेडर, शॉर्टकट या मेन्यू के लिए एक ही हुक जिसे पैनलों पर असर डालना है।

const { reveal, close, toggle, isShown } = usePanels<PanelId>()

फिर से जमाएँ

एक प्रॉप, और पढ़ने वाला रेल का कोई आइकन दूसरे आधे हिस्से में खींच सकता है। वह जहाँ रखता है, वह बाकी ख़ाके के साथ याद रहता है।

<Panels<PanelId> draggablePanels>

React के बाहर से चलाएँ

स्टोर खुद बनाइए, फिर सॉकेट, नेटिव मेन्यू या वर्कर भी कोई पैनल खोल सकता है।

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

रंग बदलें

हर मान एक कस्टम प्रॉपर्टी है। एक्सेंट तय कीजिए और रेल आपके ब्रांड का अनुसरण करेगी।

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}

या सिर्फ़ तर्क लीजिए

कंपोनेंट ऐसे हुक पर बने हैं जो कुछ भी नहीं दिखाते। उन पर अपना ढाँचा खुद बनाइए।

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