定价

SidePanel

Figma 源代码

从页面右侧展示详情或辅助内容，支持浮层与内嵌两种形态，让用户保留主页面上下文。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于可打开、关闭的详情或辅助面板，支持浮动与内嵌。一直显示的通知、活动、联系人栏可用页面 aside，不因位置在右侧就使用此组件。

  • bind:open 控制显示，placement 选择浮动或内嵌，width 可绑定并受最小/最大值限制。

  • children 是滚动内容；内嵌位移动效按 inlineMotionOwner 指定唯一负责方，避免页面与组件重复移动。

  • 未传 title 时，工具栏标题与面板名称随 LocaleProvider 切换；显式 title（含空字符串）及业务内容保持原样。

导入

import { SidePanel } from '@snowui-design-system/components';

用法

遮罩层

工具栏

关闭方式

API 参考

属性 类型 默认值 示例 描述
open boolean false open 是否显示面板，支持 bind:open
placement SidePanelPlacement "floating" placement={value} 浮层或内嵌到页面右侧，支持 bind:placement
width number 460 width={42} 面板宽度，支持 bind:width
minWidth number 320 minWidth={42} 拖动调整面板宽度时允许的最小宽度。
maxWidth number 720 maxWidth={42} 拖动调整面板宽度时允许的最大宽度。
inlineMotionOwner "component" | "layout" "component" inlineMotionOwner="component" 内嵌位移动效归属。组件级 fallback 为 component；采用本文默认浮动停靠集成时必须传 layout，并配合 layout helper 与常驻 rail。
showTopToolbar boolean true showTopToolbar 是否显示上工具栏（内容固定，不可换按钮）
editable boolean false editable 内容可编辑；true 时自动显示下工具栏默认按钮
showBottomToolbar boolean — showBottomToolbar 显式覆盖下栏显隐；默认 = editable 或任一下栏自定义
bottomLeading Snippet — bottomLeading={bottomLeadingContent} 下栏左侧整组显式替换；传入即显示下栏
bottomTrailing Snippet — bottomTrailing={bottomTrailingContent} 下栏右侧整组显式替换；传入即显示下栏
bottomLeadingActions SidePanelToolbarAction[] — bottomLeadingActions={bottomLeadingActions} 数据内置；传入即显示下栏；有 bottomLeading 时忽略 默认行为：可编辑时默认 copy/delete。
bottomTrailingActions SidePanelToolbarAction[] — bottomTrailingActions={bottomTrailingActions} 数据内置；传入即显示下栏；有 bottomTrailing 时忽略 默认行为：可编辑时默认 取消/保存。
title string — title="Example" 上工具栏右侧标题及面板无障碍名称；未传时使用 sidePanel.title，zh-CN 为“详情”、en-US 为“Details”；显式空字符串保留
showTitle boolean false showTitle={true} 是否显示工具栏标题；关闭后保留无障碍名称与工具栏按钮
backdrop DialogBackdrop | false false backdrop={value} 浮层背景，复用 Dialog 共享遮罩；内嵌模式忽略
closeOnEscape boolean true closeOnEscape Escape 关闭
closeOnOutside boolean true closeOnOutside 点击 SidePanel 外区域关闭
onOpenChange (open: boolean) => void — onOpenChange={(value) => { /* handle value */ }} 面板打开状态变化后回调。
onPlacementChange (placement: SidePanelPlacement) => void — onPlacementChange={(value) => { /* handle value */ }} 浮层与内嵌位置切换后回调。
onPrevious () => void | Promise<void> — onPrevious={(value) => { /* handle value */ }} 点击上工具栏“上一项”后回调。
onNext () => void | Promise<void> — onNext={(value) => { /* handle value */ }} 点击上工具栏“下一项”后回调。
onCopy () => void | Promise<void> — onCopy={(value) => { /* handle value */ }} 点击默认下工具栏复制操作后回调。
onDelete () => void | Promise<void> — onDelete={(value) => { /* handle value */ }} 点击默认下工具栏删除操作后回调。
onClose () => void | Promise<void> — onClose={(value) => { /* handle value */ }} 关闭前回调
children Snippet — <SidePanel>Content</SidePanel> 面板滚动内容区，由调用方提供详情或编辑内容。
parts ComponentPartsOf<{ Button: typeof Button; Indicator: typeof Indicator; }> — parts={partsOptions} 仅配置内置工具栏 Button 与整边调宽交互层；class / style 等完整 part Props 进入默认实例，children、bottomLeading、bottomTrailing 的显式子组件不继承。