split.js的用法

Split.js 是一种 JavaScript 库，可用于创建可拖动的分割窗格效果。它可以用于在不同的区域之间创建分隔符，例如面板、表单和代码编辑器。下面是 Split.js 的常见用法：

1. 引入 Split.js 库。

在项目中引入 Split.js 库，可以通过 CDN 链接或者下载到本地进行引入。例如：

<script src="https://cdn.jsdelivr.net/npm/split.js@1.6.1/dist/split.min.js"></script>

2. 创建 HTML 结构。

使用 Split.js，在 HTML 中创建带有分割窗格的区域。例如：

<div class="splitjs">
  <div>
    <p>Pane A</p>
  </div>
  <div>
    <p>Pane B</p>
  </div>
</div>

3. 初始化 Split.js。

在 JavaScript 文件中初始化 Split.js 并且定义拆分的方向、大小及其他选项。例如：

Split(['.splitjs > div'], {
  sizes: [50, 50],
  minSize: 100,
  direction: 'horizontal'
})

Split.js 允许你设置自己喜欢的选项和样式，例如拆分的大小、方向、最小和最大大小等等，具体选项可以查看文档。

4. 定义样式

设置分割窗格的样式。例如：

.splitjs {
  display: flex;
  height: 400px;
}

.splitjs > div {
  overflow-y: auto;
  border: 1px solid #EEE;
}

上面的代码将定义分割窗格的样式，包括高度、边框、显示方式等等。

5. 运行应用

在浏览器中打开应用，你应该就能看到两个可调整大小的面板了。

总的来说，Split.js 简单易用，只需要几行代码就能创建一个具有可拖动分割器的布局。如果需要更多的自定义选项，可以查看文档获取更多信息。