Bottom Sheet
从底部打开面板，并通过拖动在吸附位置之间移动。
适用场景
- 用于小屏幕上的导航、设置或一组相关操作。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/bottom-sheet.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
packages/vue/src/motion/bottom-sheet/demo.vue
<script setup lang="ts">
import { ref } from "vue";
import { BottomSheet } from "@/components/orvui/motion/bottom-sheet";
const open = ref(false);
const actions = ["Share", "Duplicate", "Move to folder", "Rename", "Archive", "Delete"];
</script>
<template><div>
<button type="button" @click="open = true" class="inline-flex h-10 items-center rounded-full border border-border bg-card px-5 text-sm font-medium text-foreground press hover:border-(--color-border-strong)">Open bottom sheet</button>
<BottomSheet v-model:open="open" :snap-points="[0.4, 0.85]" title="Quick actions" description="Move the handle or flick downward to close."><ul class="divide-y divide-border"><li v-for="action in actions" :key="action" class="py-3 text-sm text-foreground">{{ action }}</li></ul><div class="py-12 text-center text-xs text-muted-foreground">Flick up for more room, or down to close.</div></BottomSheet>
</div></template>
packages/vue/src/motion/bottom-sheet/src/BottomSheet.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
BottomSheet | v-model:openboolean | update:open |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
openbooleanfalsesnapPoints?(number | "auto")[]() => [0.5, 0.92]defaultSnap?number0title?string—description?string—dismissThreshold?number120事件
update:open[open: boolean]@update:open插槽
default() => VNodeChild#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Bottom Sheet？
- 通过 open、snapPoints、defaultSnap、title、description、dismissThreshold 配置 Bottom Sheet；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:open，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1