如何使用 Vuetify 制作垂直 v-btn？

Posted 2023-02-22

【中文标题】如何使用 Vuetify 制作垂直 v-btn？

【英文标题】：How can I make a vertical v-btn with Vuetify?

【发布时间】：2020-06-22 06:17:00

【问题描述】：

我试图保持图标原样（水平）并且按钮名称垂直向上。但不知何故，我发现的类似问题的建议似乎不适用于我的按钮。有人有想法吗？

    <v-btn fixed right tile style="z-index: 5">
          <v-icon left>mdi-icon-name</v-icon>
          ButtonName
    </v-btn>

【问题讨论】：

您能否分享一张您正在尝试完成的工作的图片，以免造成任何误解？

类似codepen.io/boussadjra/pen/VwLyErJ?editable=true&editors=101

谢谢，@BoussadjraBrahim！根据您的建议，我使用 style="transform:rotate(-90deg)" for v-btn 和 style="transform:rotate(90deg)" for v-icon 得到了我想要的结果。

对我来说听起来像是一个 CSS 问题。与 vue 或 vuetify 没有真正的直接关系

【参考方案1】：

仅在 v-icon 上应用 CSS，保持按钮水平：

<v-icon style="transform:rotate(90deg)" ...