React 19 · 8 kB sau nén · không phụ thuộc

Bộ khung
bên dưới công cụ của bạn.

Thanh biểu tượng ở hai bên, các vùng thay đổi được kích thước bao quanh một khu vực trung tâm hoàn toàn thuộc về bạn, và bố cục vẫn còn nguyên sau khi tải lại trang. Bên dưới không dựng giao diện, bên trên tha hồ sơn lại.

Xem các ví dụ
Đang chạy thật. Hãy kéo khe giữa các mặt phẳng, bấm một biểu tượng trên thanh hoặc kéo nó sang nửa khác, hoặc đổi kích thước cửa sổ.

Bốn cách bắt đầu

Mỗi ví dụ đều chạy ngay trong trình duyệt và toàn bộ mã nguồn nằm ngay trên màn hình. Hãy bắt đầu từ cái gần nhu cầu của bạn nhất.

Tối giản

Bộ khung nhỏ nhất mà vẫn chạy được. Hai cột, một dải dưới, một khu trung tâm — và phần đầu trang của riêng bạn điều khiển tất cả.

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>

Mẹo. Các bảng cùng vùng và cùng nửa sẽ hiện luân phiên; thanh bên chuyển giữa chúng. Cho bảng thứ hai nửa secondary thì nó sẽ xếp bên dưới bảng đầu tiên. Ở đây các biểu tượng trên thanh còn có thể kéo từ nửa này sang nửa kia.

Mở Tối giản

React Router

Trung tâm là một outlet. Điều hướng chỉ thay đổi phần giữa — các cột giữ nguyên bề rộng và bảng đang mở vẫn mở.

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

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

Mẹo. Hãy khai báo các bảng ở route bố cục, phía trên outlet. Nếu khai báo theo từng trang, chúng sẽ bị gỡ bỏ sau mỗi lần điều hướng và mất hết những gì đang giữ.

Mở React Router

Thẻ tài liệu

Trung tâm chứa tài liệu trên Dockview — những thẻ có thể kéo và tách — trong khi các bảng vẫn ở hai bên.

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

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

Mẹo. Hãy nhập từ điểm vào dockview để dung lượng của nó chỉ đè lên những dự án thật sự cần thẻ. Bảng không bao giờ vào trung tâm: tài liệu có tên, còn bảng có biểu tượng.

Mở Thẻ tài liệu

Sơn lại

Cùng một bộ khung với bốn bảng màu. Màu sắc, bo góc, bề rộng thanh, chiều cao đầu bảng — tất cả đều là thuộc tính tùy biến.

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

Mẹo. Đặt biến màu nhấn ở bất kỳ phần tử cha nào, bộ khung sẽ theo bản sắc của bạn thay vì áp đặt của nó. Muốn đi xa hơn? Mọi bộ phận đều được xuất ra và thay thế được riêng lẻ.

Mở Sơn lại

Toàn bộ API

Không nhiều, và đó chính là chủ đích. Chỉ có sáu điều cần biết.

Khai báo

Một bảng là bản mô tả: nó treo ở đâu, tên là gì, và vẽ ra cái gì.

<Panel id="files" zone="left" title="Files" icon={<Icon />}>
  <FileTree />
</Panel>
Điều khiển

Một hook duy nhất cho mọi đầu trang, phím tắt hay trình đơn cần tác động lên các bảng.

const { reveal, close, toggle, isShown } = usePanels<PanelId>()
Sắp xếp lại

Một prop, và người đọc kéo một biểu tượng trên thanh sang nửa khác. Chỗ họ đặt được ghi nhớ cùng phần bố cục còn lại.

<Panels<PanelId> draggablePanels>
Điều khiển từ ngoài React

Tự tạo store, rồi socket, trình đơn hệ thống hay worker đều có thể mở một bảng.

const store = createPanelsStore<PanelId>()
socket.on('alert', () => store.getState().show('alerts'))
Sơn lại

Mọi giá trị đều là thuộc tính tùy biến. Đặt màu nhấn và các thanh sẽ theo bản sắc của bạn.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
Hoặc chỉ lấy phần logic

Các thành phần dựng trên những hook không vẽ gì cả. Hãy vẽ khung của riêng bạn lên trên.

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