Vuetify 3 (コードネーム:Titan)。
今回は、その Vuetify 3 の優れた数々のコンポーネントの中から
v-radio
の使用方法について、記事を書いていきたいと思います。
↑このような、綺麗にスタイリングされたラジオボタンを Vuetify 3 で作成できます。
なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。
v-radioをVuetify3で使用する方法
では早速、v-radio
を Vuetify3
で使用する方法です。
こちらのコンポーネントも、template側に記述する基本形は、バージョン2のものとほぼ変わりません。
前回の v-checkbox と同様に、
script内部に記述する方は、 CompositionAPI
にしっかり対応していて、きちんと動作してくれます。
それでは、まずはtemplate側の記述から。
[template側]
<div> <p>{{ selected.item }}</p> <v-radio-group v-model="selected.item"> <v-radio label="Vue.js" value="Vue.js"></v-radio> <v-radio label="Vuetify3" value="Vuetify3"></v-radio> <v-radio label="Gatsby" value="Gatsby"></v-radio> <v-radio label="React" value="React"></v-radio> <v-radio label="WordPress" value="WordPress"></v-radio> </v-radio-group> </div>
↑v-radio を使ったラジオボタンが縦に並ぶ基本的な例です。
[script側]
<script> import { reactive } from 'vue' export default { setup() { const selected = reactive({ item: '選択項目' }) const selected2 = reactive({ item: '選択項目' }) const selected3 = reactive({ item: '選択項目' }) return { selected, selected2, selected3 } } } </script>
(selected, selected2, selected3 と値を3つ定義しているのは、サンプル用です(名前はもちろん何でも良いです)。冒頭のtemplateに対応しているのは、5行目で定義して15行目で return している selected という値のみになります。他のふたつの値は、この後のセクションで使用しています)
script側では、CompositionAPI
の書き方を使用して、
setup
関数の中に v-radio
と紐づける v-model
として使用する値を定義しています。
なお、v-radio
は単体でも使用可能ですが通常は
v-radio-group
の中に書いた方が何かと便利です。(その場合 v-model
は v-radio-group
に紐付けます)
前回の v-checkbox の際と同様に、
実際に動かしてみると、 Vuetify が CompositionAPI 上で動作している!!
という事実にちょっと感動すら覚えました。
v-radio の色を変えてみる
こちらも前回 v-checkbox の際にも書いたことですが、Vuetify 2 の時と同様に
それぞれのコンポーネントには、渡すことのできる prop
が複数存在していて
様々なカスタマイズをすることが可能になっています。
たとえば color
という prop
を使うと、次の様なコードで
ラジオボタンの色を変えることできるわけです。
[template側]
<div> <p>{{ selected2.item }}</p> <v-radio-group v-model="selected2.item"> <v-radio color="orange" label="Vue.js" value="Vue.js"></v-radio> <v-radio color="orange" label="Vuetify3" value="Vuetify3"></v-radio> <v-radio color="orange" label="Gatsby" value="Gatsby"></v-radio> <v-radio color="orange" label="React" value="React"></v-radio> <v-radio color="orange" label="WordPress" value="WordPress"></v-radio> </v-radio-group> </div>
渡せる値は、material design に定義されている色名や
cssで指定できる値( color="#1AA1E5"
や color="hsla(200, 80%, 50%, 1)"
の様に指定 )
等を使用する事ができます。
水平方向への並び替えも簡単
v-radio のデフォルトの並びは縦方向です。
これを inline という prop ひとつで簡単に
水平方向(横方向)の並びに変更することが可能です。
具体的には、次の様に書きます。
[template側]
<div> <p>{{ selected3.item }}</p> <v-radio-group inline v-model="selected3.item"> <v-radio color="lime" label="Vue.js" value="Vue.js"></v-radio> <v-radio color="lime" label="Vuetify3" value="Vuetify3"></v-radio> <v-radio color="lime" label="Gatsby" value="Gatsby"></v-radio> <v-radio color="lime" label="React" value="React"></v-radio> <v-radio color="lime" label="WordPress" value="WordPress"></v-radio> </v-radio-group> </div>
↑上記の例の様に、
inline
という prop
を、v-radio-group
に付与して有効にするだけです。
これで、水平方向(横方向)に並んだラジオボタンに変更できます。
【Premium特典】コード全体をダウンロード
当記事でご紹介している、Vuetify3に対応したv-radioを表示している
サンプルhtmlファイルがダウンロードできます。(localで簡単に確認できる様、Vuetify3関連ファイルはCDNで読み込む形で表示しています)
tedate Premiumとは?
「tedate Premium」 とは、tedate.jp 閲覧時に掲示される広告を非表示にする事ができたり、会員限定記事が閲覧可能になる、
月額制の会員機能です。
ログイン頂くと、この記事のサンプルデータがダウンロードできます。
ダウンロードするには、tedate Premiumにご登録ください。
登録済みの方のログインページはこちら。
tedate Premiumのご説明・新規ご登録は次のリンクよりお進みください。
tedate Premium のご紹介
ダウンロードデータ更新日:2023年1月29日 ※随時更新予定です!
Vuetify3 公式の v-radio 解説ページ
Vuetify3 公式の、v-radio
についての公式解説ページは以下になります。
Radio button component – Vuetify
v-radioで使用する事ができる props 一覧、詳細な使用がまとめられている公式ページは以下になります。
v-radio API — Vuetify
Vuetify3 のUIコンポーネントを実際に使ってみた他の記事
- [Vuetify3]v-forを使って、 簡易スライドショーを表示する方法[v-window]
- [Vuetify3]Vue.js3に対応したカルーセル(スライドショー)を使う方法[v-carousel]
- [Vuetify3]Vue.js3に対応したcardを使う方法[v-card]
- [Vuetify3]Vue.js3に対応したsnackbar(通知表示)を使う方法[v-snackbar]
- [Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]
- [Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]
- [Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
- [Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]
この記事のまとめ
今回は前回に引き続いて、 Vuetify 3
の優れた数々のコンポーネントの中から、
v-radio
について、記事を書いてみました。
色変更のセクションでも書きましたが、Vuetify を使ってみると
マテリアルデザインの概念や、propに関する知識も自然と身についてくるので
この辺りも個人的に Vuetify が好きな理由です。
また、記事の中段でも書きましたが、こうして実際に Vuetify3 のUIコンポーネントを動かしてみると、
単純に「 Vuetify
が CompositionAPI
上で動作している!!」
という事実にちょっと感動すら覚えています。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。