在右侧垂直对齐 vuetify 选项卡

Question

vuetify 中的 vertical 属性在左侧对齐选项卡。 https://vuetifyjs.com/en/api/v-tabs/#props-vertical

如何对齐右侧的标签？ right 道具似乎不适用于 vertical.

Answer 1

你需要传递给组件的唯一道具是vertical，对齐可以在css中完成：

<template>
  <v-tabs vertical>
    <v-tab>Tab One</v-tab>
    <v-tab>Tab Two</v-tab>
    <v-tab>Tab Three</v-tab>
  </v-tabs>
</template>

<style>
.v-tabs--vertical {
  align-items: end;
  flex-direction: column;
}
.v-tabs-slider-wrapper {
  left: auto !important;
  right: 0;
}
</style>

在右侧垂直对齐 vuetify 选项卡

Align vuetify tabs vertically on the right hand side

vuetify.js