How to layout multiple Floating Action Buttons in Vuetify?

Question

I'd like to have two floating action buttons in the lower right corner, one above the other (like google maps).

Currently I'm using a fixed style bottom offset to do this on one of the buttons, like so:

<v-btn fab fixed bottom right>...</v-btn>
<v-btn fab fixed bottom right style="bottom: 90px">...</v-btn>

...to achieve this, but I don't want to hardcode the 90px, I'd really rather say "I want two Floating Action Buttons, one vertically above the other".

Is there a vuetify-way to go about this?

Answer 1

You can put them inside another element with a bit of custom CSS for positioning:

<template>
  <v-layout column class="fab-container">
    <v-btn fab>
      <v-icon>add</v-icon>
    </v-btn>
    <v-btn fab>
      <v-icon>remove</v-icon>
    </v-btn>
  </v-layout>
</template>

<style>
  .fab-container {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>

https://codepen.io/anon/pen/KyJzQP?editors=1100