1

I am using Vuetify v-tabs for a list of days in a week:

<v-tabs
    v-model="tab"
    background-color="theme"
    center-active
    icons-and-text
    show-arrows
    grow
    dark
>
    <v-tabs-slider color="primary"></v-tabs-slider>
    <v-tab v-for="item in week" :key="item.id">
            <div>{{item.date}}</div>
            <div>{{item.day}}</div>
    </v-tab>
</v-tabs>

The result is currently like this:

enter image description here

The thing is that the arrow only appears when the tab-slider display is overloaded (when displaying on mobile) but not present while viewing on desktop.

What i would like to do is:

  1. Make the arrows display always regardless of the screen size.
  2. Modify the behavior of the arrow, instead of switching between the tabs items, to change the display week.

any ideas of alternatives of how this could be implemented?

Thanks.

Tarounen
  • 1,119
  • 3
  • 14
  • 25

0 Answers0