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:
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:
- Make the arrows display always regardless of the screen size.
- 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.