Vuetifyで提供されているクラス

f:id:utouto97:20210725220657j:plain

Vuetifyで提供されているクラス

Vuetifyでは、スタイリングのためのクラスもいくつか用意されています。

詳しくは、ドキュメントに書いてあります。
(Styles and animations)

vuetifyjs.com

スペーシング

Vuetifyでは、marginやpaddingを簡単に設定できるようなクラスが提供されています。

例えば、mx-autopt-3ma-2などがあります。
指定方法はあるルールにのっとっています。

まずは、1文字目には、m (margin) か p (padding) を指定します。
続いて、2文字目は、方向を指定します。
t (top), b (bottom), l (left), r (right), x (left + right), y (top + bottom), a (all) 等が指定できます。
そして、3文字目はハイフン (-) です。
続く4文字目は大きさを指定します。
数字で指定することができます。
また、auto も指定することができます。

カラー

Vuetifyでは、色を指定できるクラスも提供されています。

例えば、redbluepinkといったクラスがあり、それらを指定することで色を変えることができます。
また、lighten-数字,darken-数字,accent-数字などで微妙な色合いも指定できます。

その他

テキストのスタイル指定やBorder radiusの指定などもできます。
詳しくは、ドキュメントにあります。

終わり