solid-dockview - a Solid.js binding

[lyonbot]

Hello I'm starting a new project and found dockview is perfect for the docking layout! Hence I made solid-dockview, providing an easy way to integrate dockview to SolidJS project.

Example

npm install solid-dockview dockview-core

import { DockPanel, DockView, openPanel } from "solid-dockview";
import "dockview-core/dist/styles/dockview.css";

const App = () => {
  return (
    <DockView class="dockview-theme-dracula" style="height: 80vh">
        <DockPanel title="First Panel">
          <p>hello world</p>
        </DockPanel>

        <DockPanel
          id="inevitable"
          title="Inevitable"
          onClose={({ panel }) => setTimeout(() => openPanel(panel), 500)}
          onOpen={({ panel }) => console.log("reopened!", panel)}
        >
          <p>You can't close this panel - it always come back</p>
        </DockPanel>

        <DockPanel
          title={<span style="color: red">Third</span>}
          closeable={false}
          position={{ referencePanel: "inevitable", direction: "right" }}
          onCreate={({ panel }) => {
            panel.api.setSize({ width: 300 });
          }}
        >
          with a smaller default width
        </DockPanel>
    </DockView>
  );
};

the solid-dockview is just a new package, yet it only wrapped Dockview and DockviewPanel. More components will come, if needed.