VuetifyJS垂直按钮文本

Question

我想在v-btn中的图标下方添加文本，但似乎找不到解决方法。这怎么可能？

Answer 1

您确实不需要进行验证。

您可以只使用CSS和flexbox。

说你有

<div class="wrapper"> 
 <div>Text Above</div>
 <div>Text Below</div>
</div>

您希望“下面的文本”位于“上面的文本”下面。您可以这样操作：

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

但是click here看到您的解决方案

Answer 2

尝试一下

 <div class="d-flex flex-column align-center">
    <v-btn icon height="30">
      <v-icon>mdi-history</v-icon>
    </v-btn>
    <p class="mb-0">abc</p>
 </div>

Answer 3

要使用 Vuetify 实现这种外观，您只需覆盖 v-btn__content 类中的 flex 方向。不要忘记为您的按钮提供一个独特的类（对我来说 flexcol），这样样式更改就不会影响其他 Vuetify 按钮。

<template>
<v-btn class="flexcol" icon height="100" width="100">
        <v-icon> mdi-tools </v-icon>
        <span> Tools </span>
</v-btn>
</template>


<style>
.flexcol .v-btn__content {
  flex-direction: column;
}
</style>