■ はじめに
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