الهيكل
تحت أداتك.

أربع طرق للبدء

كل مثال يعمل في متصفحك وشيفرته كاملة أمامك. ابدأ بالأقرب إلى حاجتك.

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;
}

الواجهة كاملة

ليست كبيرة، وهذا هو المقصود. ستة أمور تكفي.

التصريح

اللوحة واصف: أين تُعلَّق، وما اسمها، وما الذي ترسمه.

<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)