【Vue】Vuetify ~ 基本編 ~

■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/26/000242
https://dk521123.hatenablog.com/entry/2021/02/14/180324

の続き。
今回は、Vuetify でよく使う基本的なことをまとめておく。

目次

【1】空白スペース(margin / padding)

【1】空白スペース(margin / padding)

空白スペース(margin / padding)は、
以下のような感じで、設定できる。

サンプル

<div class="ml-5" />
<div class="pa-2" />

構文

[m(margin) or p(padding)][方向]-[数字]

方向

# 記号 説明 メモ
1 t Top
2 b Bottom
3 l Left
4 r Right
5 x Left/Right x軸
6 y Top/Bottom y軸
7 a All 全方向

参考文献
https://qiita.com/00__/items/d5973c7dc79b95b08739

関連記事

Vue.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue.js ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2020/12/19/000000
Vuetify ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/12/26/000242
Vuetify ~ コンポーネント編 ~
https://dk521123.hatenablog.com/entry/2021/02/14/180324
Vuetify ~ ローディング中の表示 ~
https://dk521123.hatenablog.com/entry/2021/03/03/111740
Vuetify + TypeScript で トップに戻る 丸ボタンを作る
https://dk521123.hatenablog.com/entry/2021/02/20/000000
Vuetify に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/08/000000