COMPONENT 55 · Overlays & Disclosure
侧边面板
Side Sheet
也叫DrawerSlide-overInspector Panel侧滑面板
从屏幕边缘覆盖或推动内容，用于补充任务或详情。
Slides in from an edge to host a secondary task or contextual details.
ANATOMY & USAGE
结构与使用建议
组成部分
- 边缘面板
- 标题与关闭操作
- 任务内容
适合使用
- 需要参考主内容完成短编辑或查看详情时。
不建议使用
- 它承载全局导航，或任务复杂到需要独立页面时。
键盘与无障碍
- 模态模式管理焦点和 Escape；非模态模式保持阅读顺序，关闭后恢复触发焦点。
DESCRIBE IT TO AI
这样告诉编程助手
实现侧边面板（Side Sheet）：从屏幕边缘覆盖或推动内容，用于补充任务或详情。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo">
<button id="open-sheet" type="button">打开筛选面板</button>
<dialog class="side-sheet" aria-labelledby="sheet-title">
<h2 id="sheet-title">筛选</h2>
<label>
<input type="checkbox"> 仅显示可用项</label>
<button id="close-sheet" type="button">关闭</button>
</dialog>
</div>