Vue

Vuetifyのv-btnの基本的な使い方と、いい感じに使う方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ Vue 記事の目次はこちら

Vuetify の v-btn の基本的な使い方と、リンクなどでいい感じにオシャレな見た目で使うことができる方法をまとめた記事です。

コピペで使えるように書いていますので、ぜひ参考にしてください。

環境
node --version v16.13.0
  "vue": "^2.5.7"
 "vuetify": "^2.4.2",

色を変える

まずは通常状態から

<v-btn>Test</v-btn>

v btn1

color を指定する(color=“blue”)

<v-btn color="blue">Test</v-btn>

v btn2

color には Vuetify の特別なカラーコードを使用可能(primary)

<v-btn color="primary">Test</v-btn>

v btn3

ほかには、

  1. secondly
  2. error

などがあります。

自分でよく使うカラーに名前をつけて使うことも可能です。

カラーの一覧

背景を透明にし、細い境界線を入れる(outlined)

<v-btn outlined color="blue">Test</v-btn>

v btn4

背景を透明にする(text)

<v-btn text color="blue">Test</v-btn>

v btn5

形や大きさを変える

大きさを変える(small)

<v-btn small color="primary">Test</v-btn>

v btn6

  1. x-small
  2. small
  3. large
  4. x-large

があるようです。

角を丸くする(rounded)

<v-btn rounded color="primary">Test</v-btn>

v btn7

角から丸みを完全に奪う(tile)

<v-btn tile color="primary">Test</v-btn>

v btn8

高さ height、横幅 width を指定

<v-btn height="80" width="160" color="primary">Test</v-btn>

v btn9

ユーザービリティをあげる

ローディングをつける(:loading=“true”)

<v-btn :loading="true" color="primary">Test</v-btn>

v btn10

:loading に false を渡せば消えるので、

  1. 処理が始まったら true
  2. 処理が終わったら 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を使った書き方でも可

v btn11

to を使えば、VueRouter を使ったリンクを簡単に設置できます。

nuxt という props を使えば、nuxt-link であることを指定することが可能です。

まとめ

以上、v-btn を使ったサンプルを書いてみました。

もちろん公式にも書かれている内容ではありますが、こっちの方が分かりやすいと感じてくれたら嬉しいです。

苦情・質問は TwitterDM までお願いします!それでは!