Bottom sheets（底部工作表）

底部表单是一个经过修改的 v-dialog , 从屏幕的底部滑出，类似于 v-bottom-navigation。

TIP

This feature was introduced in v3.4.0 (Blackguard)

使用

底部面板组件可以提供应用层级的操作，因为底部的区域能够包含任意的元素。

API

组件	描述
v-bottom-sheet	主要组件

组件结构

在 v-bottom-sheet 中推荐使用的组件如下：

• v-card
• v-list
• v-sheet

元素 / 区域	描述
1. 容器	底部面板是一个带有动画的从屏幕底部升起的对话框。

指南

v-bottom-sheet 组件是 v-model组件的些许修改，它和后者不同在于从屏幕底部滑动出现。它使用对话框的模式展现其他的元素。可以使用 v-model 属性或者使用 activator 插槽来对其进行控制。

下面的代码段展现了基本的 v-bottom-sheet 组件用法：

<v-bottom-sheet>
  <v-card
    title="Bottom Sheet"
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut, eos? Nulla aspernatur odio rem, culpa voluptatibus eius debitis."
  ></v-card>
</v-bottom-sheet>

属性

v-bottom-sheet 组件可以使用 v-dialog全部的可用属性。

模型 (Model)

v-model （或者 model-value）用于控制底部面板的可见性。

这也可以与 activator 插槽配合使用

嵌入 (Inset)

使用 inset 属性，可以减少区域的宽度（桌面版）至 70%。也可以使用 width 属性进一步减小。

插槽

v-bottom-sheet 组件可以使用 v-dialog 的全部插槽。

插槽	描述
1. Default	默认插槽
2. Activator	activator插槽被用于打开底部面板

INFO

activator 插槽在使用 v-model 属性时不是必须的。

示例

下面的例子展示了 v-bottom-sheet 更为高级的、更贴近真实世界的用法。

音乐播放器

使用嵌入式底部工作表，你可以制作一些实用的组件，比如这个简单的音乐播放器。

在列表中打开

通过将功能列表合并到底部表单中，您可以创建一个简单的 ‘open in’ 组件。