v-btn组件可以用作浮动按钮；它可以为应用提供最主要的操作。通过与 v-speed-dial 组件的组合使用，你可以为你的用户创建一系列的功能集。
从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。
v-speed-dial
props
slots
sass
name
absolutetype
booleandefault
falsedescription
给组件应用 position: absolute
name
bottomtype
booleandefault
falsedescription
将组件向底部对齐。
name
directiontype
stringdefault
'top'description
Speed-dial 显示的方向。可设置的值有 top, bottom, left, right。
name
fixedtype
booleandefault
falsedescription
给组件应用 position: fixed
name
lefttype
booleandefault
falsedescription
将组件向左边对齐。
name
open-on-hovertype
booleandefault
falsedescription
鼠标悬浮时开启 speed-dial
name
righttype
booleandefault
falsedescription
将组件向右边对齐。
name
toptype
booleandefault
falsedescription
将组件向顶部对齐。
name
transitiontype
stringdefault
'scale-transition'description
设置组件转换。可以是一个 built in transitions 或者是自己自定义的。
name
valuetype
anydefault
undefineddescription
控制组件可见还是隐藏。
name
activatordescription
使用时，将在点击后激活组件（或悬停特定组件），它手动阻止事件传播。如果通过模型打开组件而没有此插槽，则需要手动阻止事件传播。
name
defaultdescription
默认Vue 插槽。
name
$speed-dial-button-margindefault
6px !default;name
$speed-dial-paddingdefault
16px !default;name
$speed-dial-z-indexdefault
1 !default;下面是一些简单到复杂的例子。
为了达到更好的视觉效果，我们可以使用小型按钮以适配列表的头像。
首次显示时，浮动按钮应当使用一个动画效果加载到屏幕上，这里我们使用 v-fab-transition 和 v-show 来演示动画效果，你也可以使用任何 Vuetify 内置的动画或者自己定义一个。
v-speed-dial 组件为浮动按钮提供了强大的 api，你可以尽情定制你想要的效果。
当你的按钮需要改变默认的操作时，推荐使用一个过渡效果来彰显它的变化（如下进行标签页切换时，给悬浮响应按钮一个过渡动画）。我们是通过绑定 key 属性到数据块来正确地发送响应变化信号至 Vue 过渡系统。当你使用自定义过渡效果时，请确保已经设置mode属性为 out-in。
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!