[Vuetify]意外と知られていないVuetifyの基本的な機能[Vue.js]

Vuetifyには、意外と目が向かない便利機能がたくさんあります

これまで、VuetifyのUIコンポーネントについてひとつひとつ焦点をあてて記事を書くことが多かったですが、
今回は、あまり注目されることが少ないと思われる、Vuetifyにあらかじめ定義されているデフォルト機能について、いくつか書いていけたらと思います。

Vuetifyに定義されている基本色

↑後述しますが、実際にどんな色が適用できるか調べるには、VuetifyとVue.jsを使って私が制作した、こちらのツールをご使用ください。

Vuetifyでは、キーワードを指定することによって、
コンポーネントの色を指定することができます。
たとえば、次のように、color という prop を持っているコンポーネントなら（基本的にはほとんどのコンポーネントが持っています）キーワードを用いた色指定ができます。

<v-btn color="primary" class="white--text">button</v-btn>

デフォルトのキーワードと、それが示す色は次の通りです。

themes: {
  light: {
    primary: '#1976D2',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  },
  dark: {
    primary: '#2196F3',
    secondary: '#424242',
    accent: '#FF4081',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  },
},

↑このように light と dark で分けられています。
これは Vuetify を使用されたことがある方なら知っている事かと思いますが、
dark という prop を持っているコンポーネントであれば、いわゆるダークテーマ（明度をおさえた、一説には「画面が見やすくなる」とされているアレです）に切り替えることができるので、その場合の色指定になります。
なお他の記事でも書いていますが、Vuetifyでは、上記のキーワード指定のほかに
マテリアルカラーの色名による色指定、
または単純にcss値を prop に渡すことでも色指定が可能になっています。

どんな色なのか見てみる

上にある動画の通り、当サイトには、Vuetifyを使って制作した、カラージェネレーターがあります。
こちらを使って、それぞれのキーワードがどんな色なのか見ることができます。アクセスいただくと、HEXで色を指定できる入力欄がありますので、そこに各カラーコードを貼り付けてenterを押していただけば色の確認が可能です。次のリンクより、ぜひお試しください。
COLOR.tedate — Vuetify & Vue.js製カラージェネレーター

角丸が簡単につくれるclass

Vuetifyは、数多くの優れたUIコンポーネントを使うことができますが、
デフォルトで使いやすいclassもたくさん用意されています。

たとえば、要素に角丸を簡単につけることができるclassなども、デフォルトで用意されています。

.rounded-sm
.rounded
.rounded-lg
.rounded-xl
.rounded-pill
.rounded-circle

↑このように、最小の角丸が適用される -sm から順に、段階的にサイズが大きくなる角丸用の class が用意されています。

それぞれどんな値になるかというと、公式サイトの解説では、以下の計算式の通りになる、とのことです。

'sm': $border-radius-root / 2,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%

基準値となる $border-radius-root というSass変数があり、それは 0.25rem で定義されています。
その値を元に、上記の計算式で、各角丸のサイズとして算出されている、とのことです。
※ rem は、ルートのフォントサイズ依存のサイズ指定方法なので、仮にそれが 16px だった場合は、 0.25rem = 4px の値をとります。
その場合だと、rounded-sm で2pxの角丸、 rounded が 4px（基準値そのまま）、 rounded-lg が 8px、 rounded-xl が 24px の角丸をもつ class、という事になります。

もしも実制作で Vuetify を使っている場合があったとして、
個人的に実際に使いやすいかなと思うのは、
rounded-pill と rounded-circle の2つです。

長方形の角丸ボタンを作りたい場合などには rounded-pill を適用すれば簡単に作れますし、
FAB(フローティングアクションボタン)のように円形のボタンを作りたい場合などには rounded-circle を適用すれば簡単です。
もちろん、角丸用のclassを自作しても良いのですが、せっかくVuetifyを導入しているのに、わざわざ重複する作業をするのは…
どちらが時短につながるかは、明白なことかと思います。（とは言いつつ案外、「今後使う可能性がある」という憶測のもと、無駄にclassを新造してしまいがちなのもまた事実ですが…）

rounded- 系のclassついてのVuetify公式ページ

Border Radius — Vuetify
上記ページに公式の解説があります。
この公式解説ページでは、実際に操作してどんな感じの角丸が適用できるのか、試してみることができます。

デフォルトで用意されているトランジション

次は、Vuetifyがデフォルトで持っているトランジションについてです。

こちらも、冒頭で書いた色指定の prop の話と同様に、
transition という prop を持っているコンポーネントであれば、トランジションを設定することができます。
指定方法は、たとえば次のようになります。

<v-menu transition="fade-transition">
...
(中略)
...
</v-menu>

キーワード指定できる transition は次の通りです。
fab-transition
fade-transition
scale-transition
scroll-x-transition
scroll-x-reverse-transition
scroll-y-transition
scroll-y-reverse-transition
slide-x-transition
slide-x-reverse-transition
slide-y-transition
slide-y-reverse-transition

それぞれどんな動きをするかは、以下Vuetify公式ページで確認できます。
（トランジションに関しては、あれこれ文字で解説するよりも、実際に動きを見てもらった方が早いかと思います）
Transitions — Vuetify
うまくトランジションを活用して、スムーズな動きを適切に使用することで、より快適なUIを提供できることと思います。