CODEWITHSUNDEEP
vue.jsvuetify.js
João Gabriel Onofre
João Gabriel Onofre

Reputation: 47

Responsive Tabs with Vuetify

I have a component that have a v-tab list of items and, in certain resolutions, it works great. However, I saw that when it gets lower than 600px width, the tabs gets weird, they break a little and move off their space.

I'm thinking of displaying it in a vertical way for lower resolutions, however, I can't override the tabs style even putting everything with the !important attribute. I see that Vuetify has a prop called vertical, but, is it possible to use this kind of prop in a conditional way? Let's say, over 600px, I don't want the vertical prop and under it, I want.

Can we make something like this in Vue?

Upvotes: 2

Views: 1965

Answers (2)

Fabrício Pinto
Fabrício Pinto

Reputation: 429

is it possible to use this kind of prop in a conditional way?

Yes, you could do something like this:

<v-tabs
   :vertical="$vuetify.breakpoint.mobile"
>
</v-tabs>

or:

<v-tabs
   :vertical="$vuetify.breakpoint.name === 'xs'"
>
</v-tabs>

More information here: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service

Upvotes: 1

xonauga
xonauga

Reputation: 56

maybe the $vuetify breakpoints feature is useful for you. Set the prop with a computed property depending on current $vuetify breakpoint.

Upvotes: 2

Related Questions