I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.

Code is below:

<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>

Any assistance would be greatly appreciated!

CodePudding user response：

I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.

Otherwise, the tab styles will not be applied correctly.

So your template should be similar to:

<div id="app">
  <v-app id="inspire">
    <v-toolbar>
      ...default toolbar content
      <template v-slot:extension>
        <v-row>
          <v-col cols="3" >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>

Test this at CodePen.