I am currently using Vuetify to design the layout for my web application. I have implemented a tabbed navigation system at the top of the page and I am looking to achieve a specific visual effect.
https://i.sstatic.net/o17d0.png
I have experimented with different approaches such as enclosing each line in divs, p tags, and utilizing typography tags like and , but the text consistently remains on the same line.
Does anyone have any suggestions or ideas?
Provided below is the code snippet I am working with:
<v-app-bar color="primary" dark app dense flat>
<v-tabs>
<v-tab>
Ticket
</v-tab>
<v-tab>
Ticket
</v-tab>
<v-tab :to="{ name: 'Tickets' }">
Ticket
</v-tab>
</v-tabs>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
Additionally, here is an example of what I have attempted (some parts omitted for brevity):
<v-tab>
<body-2>Title</body-2>
<caption>another line</caption>
</v-tab>