The V-tab below generates the button known as the right one on the v-app-bar:
https://i.stack.imgur.com/DzNmq.png
<v-tab
:to="'/demo'"
active-class="text--primary"
class="
font-weight-bold
white--text
v-btn v-btn--depressed v-btn--flat v-btn--outlined
theme--dark
deep-purple--text
text--accent-4
mx-1
my-2
"
min-width="96"
text
>{{ $i18n.t("Registration") }}
</v-tab>
<v-tab :to="'/registration'"> </v-tab>
My question is how to interpret the [ class = "" ] of the v-tab, and which properties determine the background color of the v-btn and text color.
From what I understand:
v-btn--outline creates an outlined button, v-btn--flat makes it flat or round, mx1 and my-2 define margins.
What do white--text, theme--dark, text--accent-4, and deep-purple--text represent?
If I want the button to change to:
<v-btn
outlined
color="#0e2672"
elevation="2"
dark
large
@click="login"
:loading="loading"
>{{ $i18n.t("Demo") }}</v-btn
>
What adjustments should be made in the v-tab section? Also, I would appreciate any recommended resources that can help me comprehend all these elements.