この記事は 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 公式解説ページは、次の通りです。
この記事のまとめ
今回は、
Vuetifyの数あるUIコンポーネントの中から
水平方向に伸びるバーで進捗度合を表示できる v-progress-linear
について、
ものすごくシンプルな例とともに、記事を書きました。
実際に動いているサンプルや、
そのほかの prop を加えた記事も、続編にて書く予定です。
当サイトでは、今後もVue.js、Vuetifyに関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。