[Vue.js]Vuetifyで、タグとしても使える小さなチップを表示する方法[v-chip]

Vuetifyで、タグとしても使える小さなチップを表示する方法

ボタンのようでいて、ボタンとは異なる役割を持つUIパーツ。Vuetifyでチップと呼ばれるパーツを使ってみます

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、23回目になります。

以前の記事 [Vue.js, JavaScript]クリックされた要素を特定してdata属性から情報を取得する方法
v-chip という、
v-btn よりも小さいサイズの、「ユーザーが押せる要素」を例にして、記事を書きました。
今回は、この v-chip というコンポーネントについて、書いていきます。

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

そもそも chip とはどんなコンポーネントなのか

chip、聞きなれない名前ですが、どんなコンポーネントの事なんでしょう。
それに対する答えは以下です。
Chips – Material Design
Vuetify は Material Design を忠実に Vue.js 上で再現しているUIフレームワークですので、
当然、各UIパーツの概念は Material Design 公式内に存在しているわけです。
この Chip、というUIパーツについても同様に、リンク先のように、公式に概念の解説が存在します。

上記の公式解説によると、chip というUIパーツは
・Input Chips (入力チップ)
・Choice Chips (選択チップ)
・Filter Chips (フィルターチップ)
・Action Chips (アクションチップ)
↑これら4つの用途で使用されることを想定されている、と書かれています。

ボタンよりもコンパクトなサイズで使用できるので、ほかのUIパーツ内に置いて
情報を選んでもらったり、
表示する情報を絞り込んでもらったり、

といった使い方ができそうですね。

v-chip を呼び出す基本コード

<template>
  <v-chip>
    Like it !
  </v-chip>
</template>

↑Vuetify に定義されている v-chip コンポーネントを呼び出す基本形は、この様な形になります。
こちらのデフォルトの状態で、

<span class="v-chip v-size--default">
  <span class="v-chip__content">
    Like it !
  </span>
</span>

↑このように、spanタグが2重になった形で、chipが展開されます。

もちろん他のコンポーネント同様、v-chip にも
prop に値を渡す(設定する)ことで、
さまざまなカスタマイズをして使う事ができます。次のセクションで、それについて書いていきます。

いろいろな Chip を試してみる( v-chip がもつ props を試してみる)

では、 v-chip に指定できる、 prop についていくつか見てみたいと思います。

色を変える

<template>
  <v-chip color="indigo" dark>Like it !</v-chip>
</template>

↑color という prop を指定すると、Chipの色が変更できます。
他のコンポーネントと同じく、
指定できる色は、Material Color の色名指定、および css で指定可能な色が使えます。

アイコン付きのチップにする

<template>
  <v-chip color="indigo" dark>
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑このように、v-icon を 内包することで、アイコン付きのチップをつくることができます。
上記の例では、 Material Desing Icons を使用してアイコンボタンをつくっています。
Material Desing Icons は、
Vuetify公式 にも書かれていますが
次のリンク先を読み込むことで使用することができます。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

閉じること(非表示)ができるようにする

<template>
  <v-chip color="indigo" dark close v-if="isClose" @click="isClose = false">
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑close という prop を指定すると、チップを閉じる(非表示にする)ことができます。
この機能をつける際には、開閉情報を持たせておく data (上記の例では isClose という名前。名前はなんでも良いです)
一緒に v-model で渡してあげる必要があります。
上記の例のように、単純に表示/非表示の場合は v-if で紐づけても、もちろん成立します。

これは、どんな時に使えるかというと、
たとえば、膨大な情報を持つコンテンツがあったとします。

その中からある特定のカテゴリの情報をユーザーが探す時、
セレクトボックスなどのUIパーツを選択して、表示したいカテゴリを選択するとします。
画面上は、選択されるごとに、選択されたカテゴリの子カテゴリがチップとして並ぶとします。

そのようなUIがあった時、ユーザーが特定の子カテゴリだけの情報を見たい場合は、
表示されているチップを閉じることで
その選択を解除することができる。

そんな場合にも(情報の絞り込み表示の際などに)、この v-chip は有効活用できそうですね。

アウトラインスタイル

<template>
  <v-chip color="indigo" dark outlined>
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑v-btnなどと同様に、outlined という prop を指定すると、外枠線のみを持ったシンプルなデザインに変更できます。


v-chips のサンプル

v-chips のサンプルは、以下のリンク先に作成してあります。
Vuetify の v-chip のサンプル

公式ドキュメント、APIページなど

v-btn コンポーネントの Vuetify公式ページは以下です。
チップ・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧が記載されています。
v-chip API — Vuetify

この記事のまとめ

今回は、Vuetify のたくさんのUIコンポーネントの中から、
v-chip についてご紹介しました。

ぱっと見たところ、どう使うの?と思うChipというUIパーツ。

この記事の中ほどで
情報を絞り込む場合に使う想定の例を書きましたが、
そんな感じで、「他のUIパーツの操作結果の表示用」として利用したり、
他のUIパーツと組み合わせて使うと、効果的な使用方法となりそうです。

また、単純に表示が小さいのでいろいろなUI内に組み込みやすいのも利点かもしれません。

たとえばカード型UIの下などに並べてタグの様に利用したり、
そしてそのタグ1つ1つに閉じる(非表示)機能をつけておいて、
ユーザーが表示したい情報を任意に選択できる様にする、などの場合でも役に立ちそうですね。

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

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