#Split View

<div id="split-view" style="height: 32rem"></div>
<script type="module">
import {
SplitviewPanel,
createSplitview,
themeA3S,
} from "@a3s-lab/ui/dockview";
import "@a3s-lab/ui/dockview/css";

class Panel extends SplitviewPanel {
part = {
update: parameters => {
this.element.textContent = parameters.params.title;
},
dispose() {},
};
constructor(id, component) {
super(id, component);
this.api.initialize(this);
}
getComponent() { return this.part; }
}

const root = document.querySelector("#split-view");
const api = createSplitview(root, {
className: themeA3S.className,
createComponent: options => new Panel(options.id, options.name),
});
api.layout(root.clientWidth, root.clientHeight);
api.addPanel({
id: "explorer",
component: "panel",
minimumSize: 180,
params: { title: "资源管理器" },
size: 240,
});
api.addPanel({
id: "editor",
component: "panel",
minimumSize: 320,
params: { title: "编辑器" },
size: 720,
});

</script>