[Vue.js]Vuetifyで使用できるプログレス(進捗)表示[v-progress-linear]

[Vue.js]Vuetifyで使用できるプログレス(進捗)表示[v-progress-linear]

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。

対象の記事Vuetify3 Betaをインストールしてみた件

今回は、Vuetifyで使用可能な「プログレス(進捗)表示」について、手短に書きたいと思います。

Vuetifyで使用可能な「プログレス(進捗)表示」は、次の2種類があります。
・バーで進捗度合を表示できる、v-progress-linear
・円形の図形で進捗度合を表示できる、v-progress-circular

今回は、その2種類の1つめ、
水平方向に伸びるバーで進捗度合を表示できる
v-progress-linear について見ていきたいと思います。

それでは次のセクションから、基本的な使用方法について書いていきます。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

バーで進捗度合を表示できる v-progress-linear

シンプルな用例は、次の通りです。
Vue.jsの単一コンポーネント、template 内に記載する想定です。

<template>
  <!-- 進捗度に応じて value prop に値を渡します -->
  <div style="margin: 0 0; padding: 2rem;">
    <v-progress-linear value="20"></v-progress-linear>
  </div>
  <div style="margin: 0 0; padding: 2rem;">
    <v-progress-linear value="50"></v-progress-linear>
  </div>
  <div style="margin: 0 0; padding: 2rem;">
    <v-progress-linear value="100"></v-progress-linear>
  </div>
</template>

2行目のコメントアウトの通り、value という prop に 0 ~ 100 までの値を渡すことで使用できます。
(実際に試した際にわかりやすくするため、適当な余白の style をつけた div で囲っていますが、この部分は必須ではありません)

実際は、value という prop に渡す値は
Vue.js の data として用意しておき、それを動的に渡して使うことになると思います。

その場合は、例えば次のように書く形になります。

[html(Vue.jsのtemplate)側]

<template>
<div style="margin: 0 0; padding: 2rem;">
  <v-progress-linear :value="progressA"></v-progress-linear>
</div>
<div style="margin: 0 0; padding: 2rem;">
  <v-progress-linear v-model="progressB"></v-progress-linear>
</div>
</template>

↑このように、
v-bind で紐づけても良いですし(3行目の例)、
5行目の例のように v-model で値を渡しても、動作します。

dataは例によって、次のような感じで数値(number)を渡せるものを用意しておけば
大丈夫です(data名はなんでも可)。

[html(Vue.jsのtemplate)側]

data: () => ({
  progressA: 50,
  progressB: 80
}),
// (...省略_computed や mounted が続く想定...)

この他にも進捗度合いの数字を%で表示したり、
バーの色を変えたり…

といった多くの props が存在しますが、
それはまた次回の記事で書きたいと思います。

v-progress-linear の公式解説ページ

v-progress-linear の Vuetify 公式解説ページは、次の通りです。

Progress linear コンポーネント — Vuetify

この記事のまとめ

今回は、
Vuetifyの数あるUIコンポーネントの中から
水平方向に伸びるバーで進捗度合を表示できる v-progress-linear について、
ものすごくシンプルな例とともに、記事を書きました。

実際に動いているサンプルや、
そのほかの prop を加えた記事も、続編にて書く予定です。

当サイトでは、今後もVue.js、Vuetifyに関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。