SplitPane 分割面板

基本使用

tsx

import { SplitPane } from "@lite-code/shared";

export default () => {
  return (
    <div style={{ height: 1000, border: "1px solid var(--vp-c-gutter)" }}>
      {/* 第一层：左右分割 */}
      <SplitPane
        direction="horizontal"
        initialSize={300}
        minFirstSize={100}
        minSecondSize={100}
      >
        {/* 左侧面板 */}
        <div style={{ padding: 20, background: "var(--vp-c-bg-alt)", height: "100%" }}>
          <h4>Left</h4>
        </div>
        {/* 右侧面板：内部再进行上下分割 */}
        <SplitPane
          direction="vertical"
          initialSize={400}
          minFirstSize={100}
          minSecondSize={100}
        >
          <div style={{ padding: 20, background: "var(--vp-c-bg-alt)", height: "100%" }}>
            <h4>Top</h4>
          </div>
          <div style={{ padding: 20, background: "var(--vp-c-bg-alt)", height: "100%" }}>
            <h4>Bottom</h4>
          </div>
        </SplitPane>
      </SplitPane>
    </div>
  );
};