【问题标题】:make space between two Icons in Vuetify在 Vuetify 中的两个图标之间留出空间
【发布时间】:2021-10-19 19:25:50
【问题描述】:

我有两个图标,如何在它们之间留一个空格?

App.vue 中的两个图标:

<v-btn icon class="grey lighten-4">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
      <v-btn icon class="grey lighten-4">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>

【问题讨论】:

  • 请提供实际外观和预期外观
  • 我编辑帖子。请看一下

标签: vue.js vuetify.js


【解决方案1】:

建议使用像mx-2这样的内置类名,在用div包裹按钮后在按钮周围添加一些边距:

<div >
     <v-btn icon class="grey lighten-4 mx-2">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
      <v-btn icon class="grey lighten-4 mx-2">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
</div>

LIVE DEMO

【讨论】:

    【解决方案2】:

    根据 vuetify v-icon api。 我们需要使用 leftrightleft:当按钮放置在另一个元素或文本的左侧时,对按钮内的图标应用适当的边距。

    right:当按钮放置在另一个元素或文本的右侧时,对按钮内的图标应用适当的边距

    【讨论】:

      猜你喜欢
      • 2015-10-01
      • 1970-01-01
      • 2011-11-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-06-28
      • 2020-07-28
      相关资源
      最近更新 更多