BottomSheet

底部抽屉（BottomSheet）用于在当前页面上方展示临时内容，常见于移动端操作面板、筛选器、表单确认和上下文操作。

import {
  BottomSheet,
  BottomSheetClose,
  BottomSheetContent,
  BottomSheetContentBody,
  BottomSheetDescription,
  BottomSheetFooter,
  BottomSheetHeader,
  BottomSheetKnob,
  BottomSheetOverlay,
  BottomSheetRoot,
  BottomSheetTitle,
  BottomSheetTrigger
} from '@skyroc/web-ui';

架构说明

BottomSheet 基于 Vaul 的 Root、Content、Overlay、Close 等能力，并复用项目 Dialog 的标题、描述、页脚、触发器和关闭按钮样式。

• BottomSheetRoot：Vaul Root，负责打开状态、拖拽、snap point、背景缩放等行为。
• BottomSheetContent：底部面板内容，内部自动挂载 Portal、Overlay、ContentBody 和 Knob。
• BottomSheetKnob：面板顶部的拖拽指示条。
• BottomSheet：组合式主组件，内置 Trigger、Content、Header、Title、Description、Close 和 Footer。

何时使用

• 移动端需要从屏幕底部展示补充内容或操作面板时。
• 页面上下文不应完全跳转，但需要临时聚焦一个任务时。
• 内容适合纵向阅读、拖拽关闭或配合底部操作按钮时。
• 桌面端复杂表单或长内容弹窗优先考虑 Dialog 或 Drawer。

基础用法

通过 trigger 设置打开触发器，通过 title、description、children 和 footer 组织内容。

页脚与关闭

设置 footer 可在底部放置操作按钮。需要点击按钮关闭面板时，可使用 BottomSheetClose asChild 包裹自定义按钮。

设置 showClose 后，头部会显示默认关闭按钮；通过 closeProps 可以调整关闭按钮属性。

拖拽与打开状态

BottomSheet 继承 Vaul Root 的行为属性，可通过 open / onOpenChange 控制打开状态，通过 snapPoints、activeSnapPoint、setActiveSnapPoint 配置吸附点，通过 dismissible、handleOnly、closeThreshold 控制关闭交互。

自定义样式

通过 classNames 控制 overlay、content、contentBody、knob、header、title、description、footer、close 等 slot。

通过 size 可以统一控制 BottomSheet 的内容容器、正文间距、拖拽指示条、标题、描述、关闭按钮和页脚等结构尺寸。需要局部覆盖时，可继续通过 contentProps、各 slot props 或 classNames 精细调整。

API

BottomSheet

通用属性参考：基于 Vaul Root，并额外提供项目化的 header、content、footer、trigger 和 slot 样式配置。

子组件

类型