按钮：浮动按钮

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

用例

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

template

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12" sm="12" md="6">
  5.         <v-card>
  6.           <v-toolbar>
  7.             <v-app-bar-nav-icon></v-app-bar-nav-icon>
  8.           </v-toolbar>
  9.           <v-card-text style="height: 300px;" class="grey lighten-5"></v-card-text>
  10.           <v-card-text style="height: 100px; position: relative">
  11.             <v-btn
  12.               absolute
  13.               dark
  14.               fab
  15.               top
  16.               right
  17.               color="pink"
  18.             >
  19.               <v-icon>mdi-plus</v-icon>
  20.             </v-btn>
  21.           </v-card-text>
  22.         </v-card>
  23.       </v-col>
  24.       <v-col cols="12" sm="12" md="6">
  25.         <v-card>
  26.           <v-toolbar extended>
  27.             <v-app-bar-nav-icon></v-app-bar-nav-icon>
  28.             <template v-slot:extension>
  29.               <v-btn
  30.                 color="pink"
  31.                 dark
  32.                 small
  33.                 absolute
  34.                 bottom
  35.                 left
  36.                 fab
  37.               >
  38.                 <v-icon>mdi-plus</v-icon>
  39.               </v-btn>
  40.             </template>
  41.           </v-toolbar>
  42.           <v-card-text style="height: 236px;" class="grey lighten-5"></v-card-text>
  43.           <v-card-text style="height: 100px; position: relative"></v-card-text>
  44.         </v-card>
  45.       </v-col>
  46.     </v-row>
  47.   </v-container>
  48. </template>

Buttons: Floating action buttons（按钮：浮动按钮） - 图1

API

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

Buttons: Floating action buttons（按钮：浮动按钮） - 图2

示例

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

小型按钮

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

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card>
  5.         <v-toolbar color="light-blue" light extended>
  6.           <v-app-bar-nav-icon></v-app-bar-nav-icon>
  7.           <v-toolbar-title class="white--text">My files</v-toolbar-title>
  8.           <v-spacer></v-spacer>
  9.           <v-btn icon>
  10.             <v-icon>mdi-magnify</v-icon>
  11.           </v-btn>
  12.           <v-btn icon>
  13.             <v-icon>mdi-view-module</v-icon>
  14.           </v-btn>
  15.           <template v-slot:extension>
  16.             <v-btn
  17.               fab
  18.               color="cyan accent-2"
  19.               bottom
  20.               left
  21.               absolute
  22.               @click="dialog = !dialog"
  23.             >
  24.               <v-icon>mdi-plus</v-icon>
  25.             </v-btn>
  26.           </template>
  27.         </v-toolbar>
  28.         <v-list two-line subheader>
  29.           <v-subheader inset>Folders</v-subheader>
  31.           <v-list-item v-for="item in items" :key="item.title" link>
  32.             <v-list-item-avatar>
  33.               <v-icon :class="[item.iconClass]">{{ item.icon }}</v-icon>
  34.             </v-list-item-avatar>
  36.             <v-list-item-content>
  37.               <v-list-item-title>{{ item.title }}</v-list-item-title>
  39.               <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
  40.             </v-list-item-content>
  42.             <v-list-item-action>
  43.               <v-btn icon>
  44.                 <v-icon color="grey lighten-1">mdi-information</v-icon>
  45.               </v-btn>
  46.             </v-list-item-action>
  47.           </v-list-item>
  49.           <v-divider inset></v-divider>
  51.           <v-subheader inset>Files</v-subheader>
  53.           <v-list-item v-for="item in items2" :key="item.title" link>
  54.             <v-list-item-avatar>
  55.               <v-icon :class="[item.iconClass]">{{ item.icon }}</v-icon>
  56.             </v-list-item-avatar>
  58.             <v-list-item-content>
  59.               <v-list-item-title>{{ item.title }}</v-list-item-title>
  61.               <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
  62.             </v-list-item-content>
  64.             <v-list-item-action>
  65.               <v-btn icon ripple>
  66.                 <v-icon color="grey lighten-1">mdi-information</v-icon>
  67.               </v-btn>
  68.             </v-list-item-action>
  69.           </v-list-item>
  70.         </v-list>
  72.         <v-dialog v-model="dialog" max-width="500px">
  73.           <v-card>
  74.             <v-card-text>
  75.               <v-text-field label="File name"></v-text-field>
  77.               <small class="grey--text">* This doesn't actually save.</small>
  78.             </v-card-text>
  80.             <v-card-actions>
  81.               <v-spacer></v-spacer>
  83.               <v-btn text color="primary" @click="dialog = false">Submit</v-btn>
  84.             </v-card-actions>
  85.           </v-card>
  86.         </v-dialog>
  87.       </v-card>
  88.     </v-col>
  89.   </v-row>
  90. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dialog: false,
  6.         items: [
  7.           { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
  8.           { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
  9.           { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
  10.         ],
  11.         items2: [
  12.           { icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
  13.           { icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
  14.         ],
  15.       }
  16.     },
  17.   }
  18. </script>

Buttons: Floating action buttons（按钮：浮动按钮） - 图3

显示时的动画

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

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12" sm="12" md="6" offset-md="3">
  5.         <v-card>
  6.           <v-toolbar extended>
  7.             <v-app-bar-nav-icon></v-app-bar-nav-icon>
  8.             <template v-slot:extension>
  9.               <v-fab-transition>
  10.                 <v-btn
  11.                   v-show="!hidden"
  12.                   color="pink"
  13.                   fab
  14.                   dark
  15.                   small
  16.                   absolute
  17.                   bottom
  18.                   left
  19.                 >
  20.                   <v-icon>mdi-plus</v-icon>
  21.                 </v-btn>
  22.               </v-fab-transition>
  23.             </template>
  24.           </v-toolbar>
  25.           <v-card-text style="height: 300px;" class="grey lighten-5 text-center">
  26.             <v-btn color="primary" @click="hidden = !hidden">
  27.               {{ hidden ? 'Show' : 'Hide' }}
  28.             </v-btn>
  29.           </v-card-text>
  30.           <v-card-text style="height: 100px; position: relative">
  31.             <v-fab-transition>
  32.               <v-btn
  33.                 v-show="!hidden"
  34.                 color="pink"
  35.                 dark
  36.                 absolute
  37.                 top
  38.                 right
  39.                 fab
  40.               >
  41.                 <v-icon>mdi-plus</v-icon>
  42.               </v-btn>
  43.             </v-fab-transition>
  44.           </v-card-text>
  45.         </v-card>
  46.       </v-col>
  47.     </v-row>
  48.   </v-container>
  49. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       hidden: false,
  5.     }),
  6.   }
  7. </script>

Buttons: Floating action buttons（按钮：浮动按钮） - 图4

Vuetify Epic Backpack

The Vuetify Epic Backpack is a premium backpack that has a spot for everything you travel with.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-epic-backpack?ref=vuetifyjs.com)

浮动按钮和 speed-dial 组件一起

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

template script style

  1. <template>
  2.   <v-card id="create">
  3.     <v-container fluid>
  4.       <v-row class="child-flex">
  5.         <v-col cols="12" sm="6" md="4">
  6.           <v-subheader>Options</v-subheader>
  7.           <v-checkbox v-model="hover" label="Open on hover" hide-details></v-checkbox>
  8.         </v-col>
  9.         <v-col cols="12" sm="6" md="4">
  10.           <v-subheader>FAB location</v-subheader>
  11.           <v-checkbox v-model="top" label="Top" hide-details></v-checkbox>
  12.           <v-checkbox v-model="right" label="Right" hide-details></v-checkbox>
  13.           <v-checkbox v-model="bottom" label="Bottom" hide-details></v-checkbox>
  14.           <v-checkbox v-model="left" label="Left" hide-details></v-checkbox>
  15.         </v-col>
  16.         <v-col cols="12" sm="6" md="4">
  17.           <v-subheader>Speed dial direction</v-subheader>
  18.           <v-radio-group v-model="direction" hide-details>
  19.             <v-radio value="top" label="Top"></v-radio>
  20.             <v-radio value="right" label="Right"></v-radio>
  21.             <v-radio value="bottom" label="Bottom"></v-radio>
  22.             <v-radio value="left" label="Left"></v-radio>
  23.           </v-radio-group>
  24.         </v-col>
  25.         <v-col cols="12" sm="6" md="4">
  26.           <v-subheader>Transition</v-subheader>
  27.           <v-radio-group v-model="transition" hide-details>
  28.             <v-radio value="slide-y-transition" label="Slide y"></v-radio>
  29.             <v-radio value="slide-y-reverse-transition" label="Slide y reverse"></v-radio>
  30.             <v-radio value="slide-x-transition" label="Slide x"></v-radio>
  31.             <v-radio value="slide-x-reverse-transition" label="Slide x reverse"></v-radio>
  32.             <v-radio value="scale-transition" label="Scale"></v-radio>
  33.           </v-radio-group>
  34.         </v-col>
  35.       </v-row>
  36.     </v-container>
  37.     <v-speed-dial
  38.       v-model="fab"
  39.       :top="top"
  40.       :bottom="bottom"
  41.       :right="right"
  42.       :left="left"
  43.       :direction="direction"
  44.       :open-on-hover="hover"
  45.       :transition="transition"
  46.     >
  47.       <template v-slot:activator>
  48.         <v-btn
  49.           v-model="fab"
  50.           color="blue darken-2"
  51.           dark
  52.           fab
  53.         >
  54.           <v-icon v-if="fab">mdi-close</v-icon>
  55.           <v-icon v-else>mdi-account-circle</v-icon>
  56.         </v-btn>
  57.       </template>
  58.       <v-btn
  59.         fab
  60.         dark
  61.         small
  62.         color="green"
  63.       >
  64.         <v-icon>mdi-pencil</v-icon>
  65.       </v-btn>
  66.       <v-btn
  67.         fab
  68.         dark
  69.         small
  70.         color="indigo"
  71.       >
  72.         <v-icon>mdi-plus</v-icon>
  73.       </v-btn>
  74.       <v-btn
  75.         fab
  76.         dark
  77.         small
  78.         color="red"
  79.       >
  80.         <v-icon>mdi-delete</v-icon>
  81.       </v-btn>
  82.     </v-speed-dial>
  83.   </v-card>
  84. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       direction: 'top',
  5.       fab: false,
  6.       fling: false,
  7.       hover: false,
  8.       tabs: null,
  9.       top: false,
  10.       right: true,
  11.       bottom: true,
  12.       left: false,
  13.       transition: 'slide-y-reverse-transition',
  14.     }),
  16.     computed: {
  17.       activeFab () {
  18.         switch (this.tabs) {
  19.           case 'one': return { class: 'purple', icon: 'account_circle' }
  20.           case 'two': return { class: 'red', icon: 'edit' }
  21.           case 'three': return { class: 'green', icon: 'keyboard_arrow_up' }
  22.           default: return {}
  23.         }
  24.       },
  25.     },
  27.     watch: {
  28.       top (val) {
  29.         this.bottom = !val
  30.       },
  31.       right (val) {
  32.         this.left = !val
  33.       },
  34.       bottom (val) {
  35.         this.top = !val
  36.       },
  37.       left (val) {
  38.         this.right = !val
  39.       },
  40.     },
  41.   }
  42. </script>
  1. <style>
  2.   /* This is for documentation purposes and will not be needed in your application */
  3.   #create .v-speed-dial {
  4.     position: absolute;
  5.   }
  7.   #create .v-btn--floating {
  8.     position: relative;
  9.   }
  10. </style>

Buttons: Floating action buttons（按钮：浮动按钮） - 图5

横向屏幕切换

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

template script style

  1. <template>
  2.   <v-card id="lateral">
  3.     <v-toolbar
  4.       dark
  5.       tabs
  6.       flat
  7.       color="indigo"
  8.     >
  9.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Page title</v-toolbar-title>
  11.       <v-spacer></v-spacer>
  12.       <v-btn icon>
  13.         <v-icon>mdi-magnify</v-icon>
  14.       </v-btn>
  15.       <v-btn icon>
  16.         <v-icon>mdi-dots-vertical</v-icon>
  17.       </v-btn>
  18.       <template v-slot:extension>
  19.         <v-tabs
  20.           v-model="tabs"
  21.           align-with-title
  22.         >
  23.           <v-tab href="#one">Item One</v-tab>
  24.           <v-tab href="#two">Item Two</v-tab>
  25.           <v-tab href="#three">Item Three</v-tab>
  26.           <v-tabs-slider color="pink"></v-tabs-slider>
  27.         </v-tabs>
  28.       </template>
  29.     </v-toolbar>
  30.     <v-card-text>
  31.       <v-tabs-items v-model="tabs">
  32.         <v-tab-item
  33.           v-for="content in ['one', 'two', 'three']"
  34.           :key="content"
  35.           :value="content"
  36.         >
  37.           <v-card
  38.             height="200px"
  39.             flat
  40.           >
  41.           </v-card>
  42.         </v-tab-item>
  43.       </v-tabs-items>
  44.     </v-card-text>
  45.     <v-fab-transition>
  46.       <v-btn
  47.         :key="activeFab.icon"
  48.         :color="activeFab.color"
  49.         fab
  50.         large
  51.         dark
  52.         bottom
  53.         left
  54.         class="v-btn--example"
  55.       >
  56.         <v-icon>{{ activeFab.icon }}</v-icon>
  57.       </v-btn>
  58.     </v-fab-transition>
  59.   </v-card>
  60. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       fab: false,
  5.       hidden: false,
  6.       tabs: null,
  7.     }),
  9.     computed: {
  10.       activeFab () {
  11.         switch (this.tabs) {
  12.           case 'one': return { color: 'success', icon: 'share' }
  13.           case 'two': return { color: 'red', icon: 'edit' }
  14.           case 'three': return { color: 'green', icon: 'keyboard_arrow_up' }
  15.           default: return {}
  16.         }
  17.       },
  18.     },
  19.   }
  20. </script>
  1. <style>
  2.   /* This is for documentation purposes and will not be needed in your application */
  3.   #lateral .v-btn--example {
  4.     bottom: 0;
  5.     position: absolute;
  6.     margin: 0 0 16px 16px;
  7.   }
  8. </style>

Buttons: Floating action buttons（按钮：浮动按钮） - 图6