CODEWITHSUNDEEP
cssvue.jsvuetify.js
Brad
Brad

Reputation: 8698

Vuetify text color variants

I want to use one of the color variants for text, how can I do this? I have tried:

<h2 class="red--text lighten-1--text">My Address</h2>

<h2 class="red--text lighten-1">My Address</h2>

<h2 class="red-lighten-1--text">My Address</h2>

and many other variations, but I can only seem to get the text to go the base red color, not the variants listed here. Can anyone help?

Upvotes: 25

Views: 31806

Answers (3)

Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22804

You must use it this way:

<h2 class="red--text text--lighten-1">My Address</h2>

For darken-{n} and lighten-{n}, pre-pend text instead of appending it.

Actually there is even an example almost as exactly as yours in the documentation:

<template>
  <div>
    Lorem ipsum dolor sit amet, <strong class="red--text text--lighten-1">inciderint</strong> definitionem est ea, explicari prodesset eam id. Mazim doctus vix an. <span class="indigo--text text--darken-2">Amet causae probatus nec ex</span>.
  </div>
</template>

Demo here:

<h2 class="red--text text--lighten-1">My Address</h2>.
<h2 class="red--text text--lighten-2"> My Address</h2>.

and result is this:

enter image description here

Upvotes: 10

Mousa Abdelmaksoud
Mousa Abdelmaksoud

Reputation: 31

In Vuetify 3 the old answers are deprecated.

Variants are no longer a separate class, it must be combined with a color.

You should write it in this way:

<h2 class="text-red-lighten-1">My Address</h2>.

Take a look at Vuetify Migration guide

Upvotes: 2

fila90
fila90

Reputation: 1457

class="red--text text--lighten-5"

from the docs

Text colors also support darken and lighten variants using text--{lighten|darken}-{n}

or you can inspect elements and pick up classes from there

Upvotes: 52

Related Questions