Vuetifyのv-btnの基本的な使い方と、いい感じに使う方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vuetify の v-btn の基本的な使い方と、リンクなどでいい感じにオシャレな見た目で使うことができる方法をまとめた記事です。
コピペで使えるように書いていますので、ぜひ参考にしてください。
環境
node --version v16.13.0
"vue": "^2.5.7"
"vuetify": "^2.4.2",色を変える
まずは通常状態から
<v-btn>Test</v-btn>
color を指定する（color="blue"）
<v-btn color="blue">Test</v-btn>
color には Vuetify の特別なカラーコードを使用可能(primary)
<v-btn color="primary">Test</v-btn>
ほかには、
- secondly
- error
などがあります。
自分でよく使うカラーに名前をつけて使うことも可能です。
背景を透明にし、細い境界線を入れる(outlined)
<v-btn outlined color="blue">Test</v-btn>
背景を透明にする(text)
<v-btn text color="blue">Test</v-btn>
形や大きさを変える
大きさを変える(small)
<v-btn small color="primary">Test</v-btn>
- x-small
- small
- large
- x-large
があるようです。
角を丸くする(rounded)
<v-btn rounded color="primary">Test</v-btn>
角から丸みを完全に奪う（tile)
<v-btn tile color="primary">Test</v-btn>
高さ height、横幅 width を指定
<v-btn height="80" width="160" color="primary">Test</v-btn>
ユーザービリティをあげる
ローディングをつける(:loading="true")
<v-btn :loading="true" color="primary">Test</v-btn>
:loading に false を渡せば消えるので、
-
処理が始まったら true
-
処理が終わったら false
にすると簡単にボタンに対してローディングをつけることができます。
ローディングのサンプル
<template>
<v-btn @click="post" :loading="loading" color="primary">Test</v-btn>
</template>
<script>
export default {
data() {
return {
loading: false,
test: "test",
}
},
methods: {
post: function () {
this.loading = true //ここでローディングをスタート
//処理をここに書く
//例えば
axios
.post("/test", {
test: this.test,
})
.then(data => {
this.loading = false //ここでローディングをストップ
})
},
},
}
</script>オススメレイアウト
リンクとして使うとき
<v-btn to="/news" color="orange" outlined rounded style="font-weight: bold;"
>お知らせはこちら</v-btn
>
// toの書き方 :to="{name: 'news'}"のnameを使った書き方でも可
to を使えば、VueRouter を使ったリンクを簡単に設置できます。
nuxt という props を使えば、nuxt-link であることを指定することが可能です。
まとめ
以上、v-btn を使ったサンプルを書いてみました。
もちろん公式にも書かれている内容ではありますが、こっちの方が分かりやすいと感じてくれたら嬉しいです。
苦情・質問は TwitterDM までお願いします！それでは！
