按钮: 悬浮响应按钮

v-btn组件可以用作悬浮响应按钮;它可以为应用提供最主要的操作。通过与v-speed-dial 组件的组合使用, 你可以为你的用户创建一系列的功能集。

用例

Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the small variant can be used to maintain continuity with similar sized elements.

API

v-speed-dial
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
bottom
默认值
false
类型
boolean

将组件向底部对齐

名称
direction
默认值
'top'
类型
string

Speed-dial显示的方向. 可设置的值有 top, bottom, left, right.

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
left
默认值
false
类型
boolean

将组件向左边对齐

名称
mode
默认值
undefined
类型
string

设置过渡模式(不适用于“过渡组(transition-group)”)

名称
open-on-hover
默认值
false
类型
boolean

悬浮时开启Speed-dial

名称
origin
默认值
undefined
类型
string

设置过渡原点

名称
right
默认值
false
类型
boolean

将组件向右边对齐

名称
top
默认值
false
类型
boolean

将组件向顶部对齐

名称
transition
默认值
'scale-transition'
类型
string

设置组件过渡效果,可以是内置的过渡配置或者是您自己的配置的其中一个。

名称
value
默认值
undefined
类型
any

控制可见性

示例

小型按钮

为了达到更好的视觉效果,我们可以使用小型按钮以适配列表的头像。

显示时的动画

首次显示时,悬浮响应按钮应当使用一个动画效果加载到屏幕上,这里我们使用v-fab-transition和v-show来演示动画效果,你也可以使用任何Vuetify内置的效果或者你自定义的。

横向屏幕切换

当你的按钮需要改变默认的操作时,这里推荐使用一个过渡效果来彰显它的变化(如下进行标签页切换时,给悬浮响应按钮一个过渡动画)。我们是通过绑定key属性到数据块来正确地发送响应变化信号至Vue过渡系统。当你使用自定义过渡效果时,请确保已经设置mode属性为out-in

悬浮响应按钮用于v-Speed-dial组件

v-speed-dial组件为悬浮响应按钮提供了强大的api,你可以尽情定制你想要的效果。

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