侧边面板浮层
它从屏幕侧边出现,承载与主内容相关的详情、筛选或辅助任务。
- 从屏幕右边滑进来的一块内容
- 不离开当前页就在旁边打开详情
- 贴着右边出现的设置面板
- 侧滑面板
- 侧边工作表
- 边缘面板
示例
尚无经验证的示例
这条词条暂时只提供平台定义和出处,不用临时动画冒充正式内容。
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Side Sheet
也叫 Side Panel
网页没有原生侧边面板,需要自行组合对话框或区域布局、动画和焦点管理。
通常怎么做:宽屏可用并排 aside,窄屏用模态对话框或底部面板;不要遮住关键内容。
iOS需自己实现
iOS / iPadOS
Side Sheet
也叫 Inspector
苹果移动平台没有通用侧边工作表;iPadOS 常用 Inspector、Sidebar 或分栏承载辅助内容。
通常怎么做:使用 NavigationSplitView 或 inspector;紧凑宽度改为 Sheet 或新页面。
Android原生支持
Android Views;Compose 可使用自适应 Levitate pane
Side Sheet
Material Components Views: SideSheetDialog / SideSheetBehavior
经典 Material Components Views 有正式接口;Compose 的通用 Material 3 侧边面板接口仍以自适应 pane 为主。
使用规范
什么时候用
- 宽屏需要在不丢失主内容上下文的情况下查看详情、筛选或辅助工具
什么时候别用
- 手机窄屏、任务很长,或辅助内容其实是一级导航
给 AI 的提示词
这条词条还没有经过验证的实现提示词。