CODEWITHSUNDEEP
vuetify.js
Seth
Seth

Reputation: 2796

How to layout multiple Floating Action Buttons in Vuetify?

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?

Upvotes: 7

Views: 11064

Answers (2)

Nelson La Rocca
Nelson La Rocca

Reputation: 183

You can apply a class tag like this:

<template>
  <v-card>
    <v-card-text style="height: 100px; position: relative">
      <v-fab-transition>
        <v-btn color="grey" dark absolute top right fab small>
          <v-icon>mdi-bookmark-outline</v-icon>
        </v-btn>
      </v-fab-transition>
      <v-spacer />
      <v-fab-transition>
        <v-btn color="grey" dark absolute top right fab small class="mr-6">
          <v-icon>mdi-heart-outline</v-icon>
        </v-btn>
      </v-fab-transition>
    </v-card-text>
  </v-card>
</template>

Upvotes: 0

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4491

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

Upvotes: 7

Related Questions