Vuetify 文字色変更、サイズ、左寄せ、右寄せ指定

Vuetify でのテキストの色、サイズ、配置場所の変更について、よく忘れてしまうのでメモ。
（公式に書いてあることばかりですが...）

テキストの色の指定

class="色名--text" で色名の変更、
class="text--{darken/lighten}-番号"で明暗の指定ができる。
darkenは番号が大きくなると、より暗くなり、
lightenは番号が大きくなると、より明るくなる。

サンプル

.vue

          <p>通常</p>
          <p class="indigo--text text--darken-3">indigo--text text--darken-3</p>
          <p class="indigo--text text--darken-2">indigo--text text--darken-2</p>
          <p class="indigo--text text--darken-1">indigo--text text--darken-1</p>
          <p class="indigo--text text--lighten-1">indigo--text text--lighten-1</p>
          <p class="indigo--text text--lighten-1">indigo--text text--lighten-2</p>
          <p class="indigo--text text--lighten-1">indigo--text text--lighten-3</p>

色の一覧はこちら
https://vuetifyjs.com/ja/styles/colors/#section-30de30c630ea30a230eb30ab30e930fc

テキストのサイズの指定

class="text-value"
valueの部分に以下のいずれかを入れる。

• h1
• h2
• h3
• h4
• h5
• h6
• subtitle-1
• subtitle-2
• body-1
• body-2
• button
• caption
• overline

サンプル

.vue

          <p class="text-h1">text-h1</p>
          <p class="text-h2">text-h2</p>
          <p class="text-h3">text-h3</p>
          <p class="text-h4">text-h4</p>
          <p class="text-h5">text-h5</p>
          <p class="text-h6">text-h6</p>
          <p class="text-subtitle-1">text-subtitle-1</p>
          <p class="text-subtitle-1">text-subtitle-1</p>
          <p class="text-body-1">text-body-1</p>
          <p class="text-body-2">text-body-2</p>
          <p class="text-button">text-button</p>
          <p class="text-caption">text-caption</p>
          <p class="text-overline">text-overline</p>

text-overlineとtext-buttonは大文字になってますね。そういうものなのでしょうか。

テキストの配置場所

class="text-場所"で指定できます。

サンプル

.vue

  <p class="text-left">左寄せ</p>
  <p class="text-center">中央</p>
  <p class="text-right">右寄せ</p>