基本のコードをご紹介
こちらのコードは、Vuetify の v-select というコンポーネントを呼び出す基本形のコードです。
<template> <v-select v-bind:items="selections" label="simply selection" ></v-select> </template>
↑いつもどおり、基本形はとってもシンプルで使いやすそうですね。
解説など
では、内容について詳しく見ていきましょう。
上記の通り、基本形としてはたったの4行で表示可能です。
(※各種 props
ごとに行を分けているので4行ですが、実際は1行で書けます。他のVuetifyのコンポーネントについてもそうなのですが、 これはコンポーネントを呼び出しているタグなので <v-select />
のように、/ を付けることで閉じタグの省略記法を使うこともできます)
上のコードの
3行目にある通り、items という props
に data を v-bind することで、その data が選択項目となります。
4行目の label は、文字通りセレクトボックス上に初期表示される文字が入ります。
dataは、こんな感じで用意しておきます。
<script> new Vue({ el: '#app', vuetify: new Vuetify(), data: { selections: [ 'Vue.js', 'WordPress', 'Vuetify', 'Swiper', 'Ionic' ], } }); </script>
実際に動くサンプル
今回も、実際に動くサンプルが作成してあります。
次のリンクより、ご覧ください。
v-selectのサンプル_シンプルかつ綺麗なセレクトボックスを使ってみる
そのほかのオプション(props)など
このように、簡単に綺麗なセレクトボックスを使うことができる v-select ですが、上記の基本形のほかにも、
設定できる props
がいろいろあります。まずは、簡単に見た目を変えられるオプションを3つほどご紹介します。
外枠付きのスタイルに変える
<template> <v-select v-bind:items="selections" label="outlined selection" outlined ></v-select> </template>
↑outlined という props
を指定すると、角丸+アウトラインを持ったスタイルに変わります。
単一のUIとして使う仕様のスタイルに変える
<template> <v-select v-bind:items="selections" label="solo selection" solo ></v-select> </template>
↑solo という props
を指定すると、elevationを持ったスタイルに変わります。
これは、マテリアルデザインにおける
単一の目的としてテキストフィールド等が使用される場合のスタイルで、
詳しくは
Material Design 公式の Field variations — Solo fields の項を参照すると、どういう意図のスタイルかよくわかる事と思います。
塗りを持ったスタイルに変える
<template> <v-select v-bind:items="selections" label="filled selection" filled ></v-select> </template>
↑filled という props
を指定すると、塗りを持ったスタイルに変わります。
表示される見た目上のテキストと、選択された値をわけるセレクトボックス
UI上はわかりやすい日本語の文言を表示して、
実際は data として値を使いたいので、別のvalueを渡したい。
そんな場合には、この props
が使えます。
(というか、おそらく実際の制作では、このパターンが最も多く使われる事になるのではないでしょうか。)
コードはこちらです。
<template> <v-select :items="hasValueAndLabels" item-text="showLabel" item-value="selectedValue" v-model="selectedItem" return-object label="項目を選択"> </v-select> </template>
↑この props
についての解説です。
4行目の item-text に渡している data がUI上に表示されるテキストになります。
5行目の item-value に渡している data が、選択された際に渡る値(value)になります。
6行目の v-model に渡している data が、選択された内容が都度更新される部分です。
7行目の return-object という props
を指定する事で、この「表示される見た目上のテキストと、選択された値をわける」状態が有効になります。
8行目の label は、文字通りラベルです。
dataは、例えば以下のように用意しておきます。
ちなみに hasValueAndLabel やら selectedItem やら長いdata名がついていますが、これは何でも良いです。
<script> new Vue({ el: '#app', vuetify: new Vuetify(), data: { selectedItem: { selectedValue: 'uiframework', showLabel: 'Vuetify' }, hasValueAndLabels: [ { selectedValue: 'vuejs', showLabel: 'Vue.js' }, { selectedValue: 'wp', showLabel: 'WordPress' }, { selectedValue: 'uiframework', showLabel: 'Vuetify'}, ], } }); </script>
props
を加えたサンプル
各種 props
を加えたサンプルも、先ほどの基本形の下に並べて作成してあります。
次のリンクより、ご覧ください。
v-selectのサンプル_シンプルかつ綺麗なセレクトボックスを使ってみる
公式ドキュメント、APIページについて
v-select コンポーネントの Vuetify公式ページは以下です。
また、公式APIページはこちらになります。他のコンポーネント同様、設定できる各種 props
の一覧が記載されています。
v-select API — Vuetify
この記事のまとめ
今回は、Vuetify の数々のUIコンポーネントの中から、
綺麗なセレクトボックスを実装することができる v-select についてご紹介しました。
綺麗なUIパーツを実際に表示させながら
マテリアルデザインの概念にも触れることができるVuetify、
やはりとても優れたUIフレームワークだと感じています。
「ユーザーが操作して得られる機能や目的がその先にあるからこそ、
UIパーツというものは必要になる」
という大前提を、機能面を含めて理解する意味でも
デザイナーの方にもぜひ触れてみてほしいフレームワークかな、と個人的には感じています。
(これは何も、Webデザインに限った話じゃなく、身近な例では
エレベーターのボタンだって立派なUIパーツですし、
コーヒーマシンのボタンだってUIパーツが並んでますよね。
前者は「昇降して移動する」という目的があり、
後者は「コーヒーを淹れる」という目的があり、
それが言わば、UIを操作した結果、到達できるUXというわけですよね。
目的に快適に到達できれば、良い体験をユーザーにしてもらえる、ということですよね。)
…私自身も、もっともっと、より良い体験をユーザーの方にしてもらえるよう、日々進んで行こうと思っています。
当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。