vuetify.js - 在右侧垂直对齐 vuetify 选项卡

Question

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

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

标签： vuetify.js

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>