底部表单

底部表单是一个修改后的v-dialog,可以从屏幕底部滑动,类似于一个v-bottom-nav。底部导航组件用于按钮和特定应用程序级别操作,而底部表单可以包含任何内容。

用例

Here we display an example list of actions that could be present in an application.

API

v-bottom-sheet
名称
disabled
默认值
false
类型
boolean

禁用打开对话框的功能

名称
full-width
默认值
false
类型
boolean

Forces 100% width

名称
hide-overlay
默认值
false
类型
boolean

Components.BottomSheets.

名称
inset
默认值
false
类型
boolean

将对话框内容最大宽度减少到70%

名称
lazy
默认值
false
类型
boolean

有条件地渲染内容,只有激活时才会渲染内容

名称
max-width
默认值
auto
类型
string | number

指定表容器的最大宽度

名称
persistent
默认值
false
类型
boolean

点击外部不会消除对话框

名称
value
默认值
undefined
类型
any

控制可见性

示例

嵌入底部表单

底部表单可以被嵌入,将桌面上的最大宽度减少到70%,这可以进一步减少手动使用width属性,我们还可以使用Vuetify断点对象展示动态类绑定。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore