CODEWITHSUNDEEP
vue.jsvuetify.js
Denis
Denis

Reputation: 178

How to disable carousel in v-tabs

I'm doing kind of horizontal navigation bar using v-tabs and v-tabs-items to switch between slides by clicking on the specific tab.

But Vuetify automatically adds carousel to v-tabs component. How can I disable it? I need to make v-tabs component multilined.

I tried to add v-tab inside v-item-group, but it loose all it's styles. Also, hide-slider didn't disable slider too.

<v-tabs v-model="tab" hide-slider>
  <v-tab v-for="(item, index) of [1, 2, 3, ..., 100]" :key="index">
    {{ item }}
  </v-tab>
</v-tabs>

I should render elements like on this picture. If it haven't enought space to for element on current line - it should add it on next.

Upvotes: 1

Views: 3674

Answers (1)

tao
tao

Reputation: 90188

.v-tabs-bar__content {
  flex-wrap: wrap;
  width: 100%;
}
div.v-tabs-bar {
  height: auto;
}

... will, most likely, solve your problem.

See it working: 

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [...Array(100).keys()].map(() => ['anything', 'whatever', 'something'][Math.floor(3 * Math.random())]),
  }),
  propsData: {
    tab: {
      type: Number,
      default: 0
    }
  }  
})
.v-tabs-bar__content {
  flex-wrap: wrap;
  width: 100%;
}
div.v-tabs-bar {
  height: auto;
}
div.v-tab {
  line-height: 3rem; /* or use padding instead */
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-tabs>
    <v-tab v-for="(item, index) in items" :key="index">
      {{item}}
    </v-tab>
</v-tabs>
</div>

Upvotes: 1

Related Questions