首页 文章

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

提问于
浏览 次
2

我想在右下角有两个浮动动作按钮，一个在另一个之上（如谷歌 Map ） .

目前我在其中一个按钮上使用固定样式底部偏移量，如下所示：

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

...为了实现这一点，但我不想硬编码90px，我真的宁愿说“我想要两个浮动动作按钮，一个垂直高于另一个” .

有没有一种vuetify方式来解决这个问题？

vuetify.js

1 回答

  • 1

    您可以将它们放在另一个元素中，并使用一些自定义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

    回复于

相关问题