SideSheet

侧边面板使用原生 <dialog> 元素，从视口侧边呈现模态辅助内容。面板打开时，默认锁定其后方页面的滚动。

详情

侧边面板用于展示补充内容，用户无需离开当前页面。

关闭生命周期

原生对话框关闭时会触发 update:open(false) 和 close。如果清理操作需要等到面板完全不可见后再执行，请使用 closed。SideSheet 自身的退出动画（包括背景遮罩）结束后会触发该事件，其参数与 close 收到的原生对话框返回值相同。它不会等待插槽内容内部的动画。没有动画或启用减少动态效果时，该事件也会异步触发，不受业务超时影响。

<SideSheet v-model:open="open" @closed="selectedItem = null">
  {{ selectedItem?.name }}
  <template #actions>
    <Button variant="text" @click="open = false">关闭</Button>
  </template>
</SideSheet>

在 close 处理期间以及将 open 设为 false 时，请保留内容或载荷状态；在 closed 中再清除。

布局

对话框根元素负责视口定位和动效，面板表面负责背景、形状和高度。默认间距应用于 headline、content 和 actions 部分，而非表面本身，因此自定义满幅内容可通过覆盖相应部分的内边距来移除间距。

可滚动内容也会在块轴边缘保留常见的后代视觉溢出。有关共享表面约定及其自定义令牌，请参阅可滚动内容的视觉溢出。

示例

默认

Details

Side sheets display supplemental content without leaving the current page.

起始侧

Navigation

Start-side sheets are useful for app-level navigation or persistent context.

分离式

Places

Detached side sheets keep space around the surface while staying aligned to the viewport side.

参考

结构

高亮显示

元素	部件	选择器
<dialog>	root	[data-scope="side-sheet"][data-part="root"] left_click鼠标左键单击复制
<div>	surface	[data-scope="side-sheet"][data-part="surface"] left_click鼠标左键单击复制
<h2>	headline条件显示	[data-scope="side-sheet"][data-part="headline"] left_click鼠标左键单击复制
<div>	content条件显示	[data-scope="side-sheet"][data-part="content"] left_click鼠标左键单击复制
<div>	actions条件显示	[data-scope="side-sheet"][data-part="actions"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
closeOnBackdrop可选	Whether clicking the backdrop closes the sheet. boolean | undefined	true	check
lockScroll可选	Whether page scrolling behind the sheet is locked while open. boolean | undefined	true	check
side可选	Which viewport side the sheet enters from. startend	"end"	startcheckend
variant可选	Sheet visual style. dockeddetached	"docked"	checkdockeddetached
width可选	Sheet surface width. Such as '20rem'. string | undefined	undefined
open可选	- boolean | undefined	false

事件4

名称	类型	说明
close	[returnValue: string]	-
update:open	[value: boolean]	-
cancel	[event: Event]	-
closed	[returnValue: string]	-

插槽3

名称	参数	说明
headline	-	Optional sheet headline.
default	-	Sheet body content.
actions	-	Optional action row.

样式23

预览

Token	说明
--md-sheet-side-detached-container-shapeShape 回退值var(--md-shape-popover)	Controls side detached container shape.
--md-sheet-side-docked-container-heightLayout 回退值100%	Controls side docked container height.
--md-sheet-side-docked-container-shapeShape 回退值var(--md-shape-docked)	Controls side docked container shape.
--md-sheet-side-docked-container-widthLayout 回退值16rem	Controls side docked container width.
--md-sheet-side-docked-divider-colorColor 回退值var(--md-sys-color-outline)	Controls side docked divider color.
--md-sheet-side-docked-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls side docked focus indicator color.
--md-sheet-side-docked-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls side docked focus indicator outline offset.
--md-sheet-side-docked-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls side docked focus indicator thickness.
--md-sheet-side-docked-headline-colorColor 回退值var(--md-sys-color-on-surface-variant)	Controls side docked headline color.
--md-sheet-side-docked-headline-fontTypography 回退值var(--md-sys-typescale-title-large-font)	Controls side docked headline font.
--md-sheet-side-docked-headline-line-heightTypography 回退值var(--md-sys-typescale-title-large-line-height)	Controls side docked headline line height.
--md-sheet-side-docked-headline-sizeLayout 回退值var(--md-sys-typescale-title-large-size)	Controls side docked headline size.
--md-sheet-side-docked-headline-trackingTypography 回退值var(--md-sys-typescale-title-large-tracking)	Controls side docked headline tracking.
--md-sheet-side-docked-headline-typeTypography 回退值var(--md-sys-typescale-title-large)	Controls side docked headline type.
--md-sheet-side-docked-headline-weightTypography 回退值var(--md-sys-typescale-title-large-weight)	Controls side docked headline weight.
--md-sheet-side-docked-modal-container-colorColor 回退值var(--md-sys-color-surface-container-low)	Controls side docked modal container color.
--md-sheet-side-docked-modal-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls side docked modal container elevation.
--md-sheet-side-docked-modal-container-shapeShape 回退值var(--md-shape-docked-modal)	Controls side docked modal container shape.
--md-sheet-side-docked-standard-container-colorColor 回退值var(--md-sys-color-surface)	Controls side docked standard container color.
--md-sheet-side-docked-standard-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls side docked standard container elevation.
--md-side-sheet-closed-translateStyle 回退值100%	Controls closed translate.
--md-side-sheet-detached-gapLayout 回退值1rem	Controls detached gap.
--md-side-sheet-widthLayout 回退值var(--md-sheet-side-docked-container-width,16rem)	Controls width.