COMPONENT 10 · Navigation & Orientation

分栏视图

Split View

也叫Split PaneMaster Detail分割视图NSSplitView

把同一工作区分成可并排浏览的主从面板。

Divides one workspace into adjacent master and detail panes.

ANATOMY & USAGE

结构与使用建议

组成部分

主面板
可调整分隔条
详情面板

适合使用

用户需要保留列表上下文并同时查看详情时。

不建议使用

小屏空间不足或两个面板没有持续关系时。

键盘与无障碍

分隔条使用 separator 语义并支持方向键调整；面板标题和焦点顺序保持清楚。

DESCRIBE IT TO AI

这样告诉编程助手

实现分栏视图（Split View）：把同一工作区分成可并排浏览的主从面板。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo split-view" aria-label="项目浏览器">
  <aside>
    <strong>项目</strong>
    <a href="#split-content" aria-current="page">设计系统</a>
  </aside>
  <div class="splitter" role="separator" aria-label="调整侧栏宽度" aria-orientation="vertical"
  aria-valuemin="25" aria-valuemax="60" aria-valuenow="36" tabindex="0">
</div>
<main id="split-content">
  <h2>设计系统</h2>
  <p>在右侧查看所选项目。</p>
</main>
</section>