如何在Vuetify中布局多个浮动动作按钮?

时间:2017-11-30 00:33:42

标签: vuetify.js

我想在右下角有两个浮动动作按钮,一个在另一个之上(如谷歌地图)。

目前我使用固定式底部偏移量在其中一个按钮上执行此操作,如下所示:

public static string Reverse(string text) {
    if (text.Length <= 1) // base case
        return text;
    else // recursive case
        return Reverse(text.Substring(1))+text.Substring(0, 1);
}

...要实现这一目标,但我不想硬编码90px,我真的更愿意说#34;我想要两个浮动动作按钮,一个垂直高于另一个&#34;

有没有一种vuetify方式可以解决这个问题?

2 个答案:

答案 0 :(得分:4)

您可以将它们放在另一个带有一些自定义CSS的元素中进行定位:

<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

答案 1 :(得分:0)

您可以像这样应用类标签:

<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>