跳到主要内容
前端术语库

UI 组件 · 布局

分栏拖拽

Splitter

也叫：分割面板、可拖拽分栏、拖拽分隔条、Resizable Panels、Split Pane、Resizer

两个并排面板中间一条可以拖动的分隔条，按住左右（或上下）拖就能调整两边的大小，常见于编辑器和邮箱。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

把页面做成左右两栏、可以拖拽调整宽度的布局：左侧文件列表默认 280px，最小 200px、最大 480px，右侧编辑区占满剩余空间。中间分隔条平时是 1px 灰线，鼠标感应区 8px 宽，悬停和拖动时变成 2px 蓝线、光标为 col-resize，拖动过程中禁止选中文字。双击分隔条恢复 280px，宽度存到 localStorage。分隔条加 role="separator" 和 aria-valuenow，支持左右方向键每次调整 16px。宽度小于 768px 时改为上下堆叠，不能拖。

发给

01判断

你的内容是这样吗？

对照两列，确认分栏拖拽是不是你要找的。

符合这些情况，用分栏拖拽

  • 代码编辑器、设计工具、AI 对话加预览这类两块内容都要看的工作区
  • 邮箱、文件管理器这类主从布局，列表和详情该占多宽因人而异
  • 左右对比两份内容（新旧版本、原文和译文），用户想自己调整各占多宽

是这些情况，换成别的

  • 手机等窄屏页面，没有空间并排，也很难精确拖动

  • 官网、文章这类普通浏览页面，用户不需要调整布局

  • 只需要展开和收起侧栏时，一个折叠按钮更简单

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    分隔条的感应区域只有 1px，鼠标很难抓到，用户以为拖不动

  2. 02

    没有设最小宽度，一拖就把一侧拖成 0，再也找不回来

  3. 03

    看起来和普通分割线一模一样，没有把手也不换光标，用户根本不知道能拖

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由两个或多个并排（或上下排列）的面板和夹在中间的可拖动分隔条组成，分隔条中间常有一个小把手。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1两块并排面板之间的一条竖线（或横线），中间常有几个小点或短竖条做把手
  2. 2鼠标移到线上时，光标变成左右（或上下）双向箭头
  3. 3两侧面板宽度不对称，像是被用户调过

04解释

详细解释

分栏拖拽把一块区域分成两三栏，栏与栏之间有一条细分隔条，鼠标移上去变成双向箭头光标，按住拖动就能把一边拉宽、另一边变窄。代码编辑器的文件树和编辑区、邮箱的邮件列表和正文、AI 工具的对话区和预览区，都靠它让用户自己决定哪边多占点地方。很多实现还支持双击分隔条恢复默认宽度，拖到很窄时整栏收起。

它和 分割线 的区别：分割线只是一条静态的线，把内容隔开，不能动；分栏拖拽的分隔条是一个可以拖的控件。它也不是 侧边菜单 的折叠按钮：折叠只有展开和收起两种状态，拖拽可以停在任意宽度。

每栏要设最小宽度和最大宽度，防止被拖没或者把另一边挤没；拖好的宽度最好存在本地，下次打开保持不变。分隔条的线可以很细，但能抓住的感应区域至少 6~8px 宽，还要能用键盘方向键调整。手机上屏幕太窄，一般改成上下堆叠或标签页切换，不再提供拖拽。

开发者信息
术语 ID
component-splitter
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-splitter
  • .el-splitter
  • .arco-resizebox-split
  • .n-split
  • [data-slot="resizable-panel-group"]
  • [data-slot="resizable-handle"]
  • [data-panel-group]
  • [data-panel-resize-handle-id]
  • .SplitPane
  • .gutter.gutter-horizontal
  • .gutter.gutter-vertical
  • [role="separator"][aria-valuenow]
  • [role="separator"][tabindex]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • splitter
  • split-pane
  • split-panel
  • split-view
  • resizable
  • resizer
  • resize-handle
  • resizable-panel
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Splitter
  • SplitPane
  • ResizablePanelGroup
  • ResizableHandle
  • PanelResizeHandle
  • PanelGroup
  • Allotment
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • role=separator
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30