# Split 分割器

一个可调整大小的分割器组件，允许用户通过拖动分割线来调整相邻面板的大小。非常适合创建具有灵活面板大小的可调整布局。

## 特性

- **可调整面板**: 拖动以调整相邻面板的大小
- **方向支持**: 水平和垂直方向
- **自定义宽度**: 设置分割线的宽度
- **反向模式**: 可选的反向拖动方向
- **固定模式**: 可以是固定的（不可调整大小）
- **视觉反馈**: 拖动操作期间光标变化
- **最小尺寸**: 强制执行最小面板尺寸（5px）

## 安装

```bash
npm install @ticatec/uniface-element
```

```typescript
import Split from '@ticatec/uniface-element/Split';
```

## 基本用法

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let leftPanel;
  let rightPanel;
</script>

<div style="display: flex; height: 300px;">
  <div bind:this={leftPanel} style="flex: 0 0 200px; background: #f0f0f0;">
    左侧面板
  </div>
  <Split bindingPanel={leftPanel} direction="horizontal" />
  <div bind:this={rightPanel} style="flex: 1; background: #e0e0e0;">
    右侧面板
  </div>
</div>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|-------------|
| `direction` | `'horizontal' \| 'vertical'` | `'vertical'` | 分割器方向 |
| `width` | `number` | `2` | 分割线的宽度/厚度（px） |
| `bindingPanel` | `HTMLElement \| null` | `null` | 要调整大小的面板的引用 |
| `reverse` | `boolean` | `false` | 反向拖动方向 |

## 示例

### 水平分割

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 400px;">
  <div bind:this={panel1} style="flex: 0 0 250px; padding: 16px; background: #f5f5f5;">
    <h3>左侧面板</h3>
    <p>通过拖动分割线调整我的大小！</p>
  </div>

  <Split bindingPanel={panel1} direction="horizontal" width="4" />

  <div style="flex: 1; padding: 16px; background: #e8e8e8;">
    <h3>右侧面板</h3>
    <p>此面板填充剩余空间</p>
  </div>
</div>
```

### 垂直分割

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let topPanel;
  let bottomPanel;
</script>

<div style="display: flex; flex-direction: column; height: 400px;">
  <div bind:this={topPanel} style="flex: 0 0 150px; padding: 16px; background: #f5f5f5;">
    <h3>顶部面板</h3>
  </div>

  <Split bindingPanel={topPanel} direction="vertical" width="4" />

  <div style="flex: 1; padding: 16px; background: #e8e8e8;">
    <h3>底部面板</h3>
  </div>
</div>
```

### 自定义宽度

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 300px;">
  <div bind:this={panel1} style="flex: 0 0 200px; background: #f0f0f0;">
    面板 1
  </div>

  <!-- 粗分割线 -->
  <Split bindingPanel={panel1} width="8" />

  <div style="flex: 1; background: #e0e0e0;">
    面板 2
  </div>
</div>
```

### 反向方向

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 300px;">
  <div style="flex: 1; background: #e0e0e0;">
    面板 1（面板2缩小时展开）
  </div>

  <!-- 反向模式：向相反方向拖动 -->
  <Split bindingPanel={panel1} reverse />

  <div bind:this={panel2} style="flex: 0 0 200px; background: #f0f0f0;">
    面板 2
  </div>
</div>
```

### 固定分割线

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';
</script>

<!-- 没有 bindingPanel 时，分割线是固定的（不可调整大小） -->
<div style="display: flex; height: 300px;">
  <div style="flex: 1; background: #f0f0f0;">
    面板 1
  </div>

  <Split /> <!-- 固定分割线 -->

  <div style="flex: 1; background: #e0e0e0;">
    面板 2
  </div>
</div>
```

### 完整的可调整布局

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let sidebar;
  let mainContent;
  let detailPanel;
</script>

<div style="display: flex; height: 100vh;">
  <!-- 侧边栏 -->
  <div bind:this={sidebar} style="flex: 0 0 250px; background: #2d3748; color: white; padding: 16px;">
    <h3>侧边栏</h3>
    <ul>
      <li>菜单项 1</li>
      <li>菜单项 2</li>
      <li>菜单项 3</li>
    </ul>
  </div>

  <!-- 侧边栏的垂直分割 -->
  <Split bindingPanel={sidebar} direction="horizontal" width="4" />

  <!-- 主内容区域，带有垂直分割 -->
  <div style="flex: 1; display: flex; flex-direction: column;">
    <!-- 顶部面板 -->
    <div bind:this={mainContent} style="flex: 0 0 60%; background: #f7fafc; padding: 16px;">
      <h2>主要内容</h2>
      <p>这是主内容区域。拖动下方的分割线来调整大小。</p>
    </div>

    <!-- 水平分割 -->
    <Split bindingPanel={mainContent} direction="vertical" width="4" />

    <!-- 底部面板 -->
    <div style="flex: 1; background: #edf2f7; padding: 16px;">
      <h3>详情面板</h3>
      <p>额外的详细信息和数据</p>
    </div>
  </div>
</div>
```

## 最佳实践

1. **面板引用**: 始终使用 `bindingPanel` 绑定要调整大小的面板
2. **Flex 布局**: 使用 flexbox 以获得可预测的调整大小行为
3. **初始大小**: 为可调整大小的面板设置合理的初始大小
4. **最小尺寸**: 组件强制执行 5px 的最小面板尺寸
5. **用户反馈**: 光标变化在拖动期间提供视觉反馈
6. **固定分割线**: 对于不可调整大小的分割线，不提供 `bindingPanel`

## 浏览器支持

- 支持完整 flexbox 的现代浏览器
- 用于拖动功能的鼠标事件
- 触摸设备（带有触摸事件处理）

## 注意事项

- `bindingPanel` 必须是有效的 HTML 元素引用
- 强制执行最小面板尺寸为 5px 以防止折叠
- 拖动操作直接更新面板的样式
- 光标在拖动操作期间自动变化
- 组件使用 `mousedown`、`mousemove` 和 `mouseup` 事件