CODEWITHSUNDEEP
javascriptvue.jstabsvuetify.js
Tom
Tom

Reputation: 6004

Remove header of VuetifyJS v-tabs component

I need the functionality of this VuetifyJS v-tabs NEXT TAB component but without the navigation header. How to remove it?

Here is a CodePen example

<v-tabs
  v-model="active"
  color="cyan"
  dark
  slider-color="yellow"
>
  <v-tab
    v-for="n in 3"
    :key="n"
    ripple
  >
    Item {{ n }}

  </v-tab>
  <v-tab-item
    v-for="n in 3"
    :key="n"
  >
    <v-card flat>
      <v-card-text>{{ text }}</v-card-text>
    </v-card>
  </v-tab-item>
</v-tabs>

<div class="text-xs-center mt-3">
  <v-btn @click="next">next tab</v-btn>
</div>

Upvotes: 1

Views: 1572

Answers (1)

Traxo
Traxo

Reputation: 19012

.v-tabs__bar {display: none}

Tho you might want to add a custom selector.

Or think about different approach for your functionality (use-case) because the purpose of tabs is to have... well... tabs.

Upvotes: 3

Related Questions