Props

名称	类型	默认值	说明
label	string	-	面板的无障碍名称，必填。它通过 aria-label 与面板关联；面板没有内置标题可以自动取名。
v-model:isOpen	boolean	false	受控的打开状态。绑定后组件完全跟随这个值，Escape、遮罩点击和拖动只发出更新请求；不绑定时组件自己管理状态。
height	BottomSheetHeight | number | string	'capped'	面板的高度。命名档位 hug（贴合内容，最多 92%）、capped（约 62%）、tall（约 92%）；数字按像素解释，字符串按 CSS 长度原样使用。内容超出可见高度时在面板内部滚动。
snapPoints	readonly BottomSheetSnapPoint[]	-	拖动时可以停靠的额外高度。数字是视口比例，'50%' 是百分比，'320px' 是绝对高度；面板自身高度始终是最高的档位。不传时面板只能打开和关闭。
padding	BottomSheetPadding	-	内容区的内边距，取值来自间距刻度。不设置时使用主题为底部弹窗定义的内边距，主题没有定义时取 --spacing-4（16px），四个逻辑边相同；传入 0 可以让内容紧贴面板边缘。内容区是容器，唯一子元素是自带内边距的区块时该区块会顶掉这层内边距。
purpose	BottomSheetPurpose	'info'	隐式关闭的尺度，与 Dialog 一致。info 允许 Escape、遮罩点击和拖动关闭；form 只允许 Escape；required 屏蔽全部隐式关闭并使用 alertdialog 语义。
hasScrim	boolean	true	是否渲染遮罩并以模态方式打开。为 true 时使用 showModal()：顶层显示、焦点限制、锁定页面滚动、背景不可交互。为 false 时使用 show()，页面保持可交互和可滚动。
finalFocusRef	HTMLElement | null	null	关闭后接收焦点的元素，用来替换打开时的那个元素。适用于触发器会被重新创建、或打开时的焦点元素不可靠的场景。
isInline	boolean	false	把面板渲染在普通文档流里，不使用 <dialog>、遮罩、焦点限制和动画。用于在已经是 inert 的容器中预览面板本身，例如组件文档。

插槽

名称	说明
default	面板的内容，渲染在拖动条下方的滚动区域里。

事件与模板引用

名称	签名	说明
openChange	(isOpen: boolean) => void	面板请求切换状态时触发：Escape、遮罩点击、拖动关闭，或 v-model:isOpen 的写入。
update:isOpen	(isOpen: boolean) => void	由 v-model:isOpen 自动监听，一般不需要手动处理。
motionStart	(motion: 'entering' | 'exiting') => void	进入或退出动画开始时触发。
motionComplete	(motion: 'entering' | 'exiting') => void	进入或退出动画结束时触发。退出动画完成后才会关闭 <dialog> 并把焦点还回去。
snap	(visibleHeight: number) => void	拖动停靠到某个档位时触发，参数是面板此刻的可见高度（像素）。
element	HTMLDivElement | null	面板元素，通过模板引用暴露；class 与 style 会落在这个元素上。
focus() / blur()	() => void	把焦点移入或移出面板。

原生属性

根元素是面板的 <div>（类名 astryx-bottom-sheet），它被包裹在一个固定的 <dialog> 里。

以下内容传入面板元素：

• HTML 属性。
• aria-* 属性（aria-label 与 aria-labelledby 例外，它们用于命名外层的对话框）。
• data-* 属性。
• class。
• style。