ホーム

転職ドラフト(次回1/19)

エンジニア向け
オススメ転職サイト1選


2021年
買ってよかったもの
ベスト3

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

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

⇨ Vue 記事の目次はこちら

Vuetify の v-btn の基本的な使い方と、いい感じに使う方法としてリンクで使うとオシャレですよーという記事です。

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

目次

  1. 色を変える
  2. 形や大きさを変える
  3. ユーザービリティをあげる
  4. オススメレイアウト

色を変える

まずは通常状態から

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

v btn1

color を指定する

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

v btn2

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

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

v btn3

ほかには、secondly とか、error とかがあります。

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

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

v btn4

背景を透明にする

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

v btn5

形や大きさを変える

大きさを変える

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

v btn6

①x-small ②small ③large ④x-large

があるようです。

角を丸くする

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

v btn7

角から丸みを完全に奪う(border-radius が 0)

<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

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

ローディングをつける

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

v btn10

: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'}"

v btn11

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

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

まとめ

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

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

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