列中的 TAB

Question

我在尝试更改应用栏选项卡的起点时遇到问题。我希望他们在第 3 栏之后开始，但我没能成功。

代码如下：

<template>
  <div class = "header">

  <v-toolbar app prominent>
    <v-layout-row>
      <v-layout-column>
      <v-img
              max-width="100"
              src="../../assets/large.png"
            />
      </v-layout-column>
      <v-layout-column/>
      <v-layout-column justify-end>
      <HeaderAccount colorTheme="#FFA200" />
      </v-layout-column>
    </v-layout-row>
    <template v-slot:extension>
      <v-tabs>
        <v-row>
          <v-col cols = '3'/>
          <v-col cols = '6'>
          <v-tab v-for="l in links" :key="l.path" :to="l.path">
            {{ l.text }}
          </v-tab>
          </v-col>
        </v-row>
      </v-tabs>
    </template>
  </v-toolbar>
  </div>
</template>

如有任何帮助，我们将不胜感激！

Answer 1

我不太清楚你的布局模板，但主要问题是 <v-tab> 标签应该是 <v-tabs> 的直接子元素。

否则，标签样式将无法正确应用。

因此您的模板应类似于：

<div id="app">
  <v-app id="inspire">
    <v-toolbar>
      ...default toolbar content
      <template v-slot:extension>
        <v-row>
          <v-col cols="3" class="lime accent-1">Three cols item</v-col>
          <v-col cols="6">
            <v-tabs
                dark
                background-color="primary"
                grow
            >
              <v-tab>
                Item One
              </v-tab>
              <v-tab>
                Item Two
              </v-tab>
              <v-tab>
                Item Three
              </v-tab>
            </v-tabs>
          </v-col>
        </v-row>
      </template>
    </v-toolbar>
  </v-app>
</div>

测试这个 at CodePen。

列中的 TAB

TABs in Columns

html

vue.js

vuetify.js