Vuetify

商店

企业版

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

浮动按钮可以附着于材料之上,用于突显你应用中的重要操作,在大多数实例中通常使用其默认大小,而小型按钮一般用于保持其与相似大小元素之间的连续性。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

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

首次显示时,浮动按钮应当使用一个动画效果加载到屏幕上,这里我们使用 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!