<div id="pane-view" style="height: 32rem"></div>
<script type="module">
import {
Orientation,
PaneviewPanel,
createPaneview,
themeA3S,
} from "@a3s-lab/ui/dockview";
import "@a3s-lab/ui/dockview/css";
class Pane extends PaneviewPanel {
body = { element: document.createElement("section"), dispose() {} };
header = { element: document.createElement("strong"), dispose() {} };
constructor(id, component) {
super({
id,
component,
headerComponent: "header",
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 32,
minimumBodySize: 48,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
this.header.element.textContent = id;
this.body.element.textContent = "窗格内容";
}
getBodyComponent() { return this.body; }
getHeaderComponent() { return this.header; }
}
const root = document.querySelector("#pane-view");
const api = createPaneview(root, {
className: themeA3S.className,
createComponent: options => new Pane(options.id, options.name),
});
api.layout(root.clientWidth, root.clientHeight);
api.addPanel({ id: "files", component: "pane", title: "文件", size: 160 });
api.addPanel({ id: "symbols", component: "pane", title: "符号", size: 120 });
</script>
