底部弹出层

底部弹出层使用原生 <dialog> 元素，从视口底部呈现模态内容。弹出层打开时，页面背景会禁止滚动。

Share

选择分享此项目的位置。

关闭 lifecycle

原生对话框关闭时会触发 update:open(false) 和 close。若清理操作必须等到底部弹出层完全不可见后再执行，请使用 closed。BottomSheet 自身的退出动画（包括背景遮罩）结束后会触发该事件，其返回值与 close 收到的原生对话框返回值相同。它不会等待插槽内容中的动画。若没有动画或启用了减少动态效果，事件会异步触发，不依赖业务超时。

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

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

布局

弹出层表面负责背景、形状、阴影和动效。默认间距应用于 headline、content 和 actions 部件，而不是整个表面，因此自定义满版内容可通过覆盖相应部件的内边距取消这些间距。

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

示例

默认

Share

Choose where this item should be shared.

无拖动柄

Compact sheet

This sheet hides the drag handle and caps the surface height.

参考

结构

高亮显示

元素	部件	选择器
<dialog>	root	[data-scope="bottom-sheet"][data-part="root"] left_click鼠标左键单击复制
<div>	surface	[data-scope="bottom-sheet"][data-part="surface"] left_click鼠标左键单击复制
<div>	drag-handle条件显示	[data-scope="bottom-sheet"][data-part="drag-handle"] left_click鼠标左键单击复制
<h2>	headline条件显示	[data-scope="bottom-sheet"][data-part="headline"] left_click鼠标左键单击复制
<div>	content条件显示	[data-scope="bottom-sheet"][data-part="content"] left_click鼠标左键单击复制
<div>	actions条件显示	[data-scope="bottom-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
showDragHandle可选	Whether to show the Material drag handle. boolean | undefined	true	check
maxHeight可选	Maximum block size of the sheet surface. Such as '80vh'. 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.

样式15

预览

Token	说明
--md-bottom-sheet-background-extensionStyle 回退值0px	Controls background extension.
--md-bottom-sheet-drag-offsetLayout 回退值0px	Controls drag offset.
--md-bottom-sheet-max-heightLayout 回退值calc(100vb - 3rem)	Controls max height.
--md-bottom-sheet-translate-offsetLayout 回退值0px	Controls translate offset.
--md-sheet-bottom-docked-container-colorColor 回退值var(--md-sys-color-surface-container-low)	Controls bottom docked container color.
--md-sheet-bottom-docked-container-shapeShape 回退值var(--md-shape-overlay-top)	Controls bottom docked container shape.
--md-sheet-bottom-docked-drag-handle-colorColor 回退值var(--md-sys-color-on-surface-variant)	Controls bottom docked drag handle color.
--md-sheet-bottom-docked-drag-handle-heightLayout 回退值0.25rem	Controls bottom docked drag handle height.
--md-sheet-bottom-docked-drag-handle-widthLayout 回退值2rem	Controls bottom docked drag handle width.
--md-sheet-bottom-docked-minimized-container-shapeShape 回退值var(--md-shape-docked)	Controls bottom docked minimized container shape.
--md-sheet-bottom-docked-modal-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls bottom docked modal container elevation.
--md-sheet-bottom-docked-standard-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls bottom docked standard container elevation.
--md-sheet-bottom-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls bottom focus indicator color.
--md-sheet-bottom-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls bottom focus indicator outline offset.
--md-sheet-bottom-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls bottom focus indicator thickness.