Vuetify.js 2.2のChipコンポーネントについて

概要

Chipコンポーネントの初歩的な使い方のまとめです。

環境

• Windows 10 Professional 1909
• Node.js 12.14.1
• Vue.js 2.6.11
• Vuetify.js 2.2.8 (投稿時は2.2.6)

参考

• [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
• [Components] (https://vuetifyjs.com/en/components/api-explorer)
• [Styles - Colors] (https://vuetifyjs.com/en/styles/colors)
• [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)

[Chips] (https://vuetifyjs.com/en/components/chips)

Props

VChip

• [VChip] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VChip/VChip.ts)
• [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
• [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/themeable/index.ts)
• [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/toggleable/index.ts)
• [Routable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/routable/index.ts)
• [Sizeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/sizeable/index.ts)

VChip ---- Colorable
      `--- Groupable
      `--- Themeable
      `--- Toggleable
      `--- Routable
      `--- Sizeable

	name	type	default	relation	src
VChip	active	boolean	true		true
	active-class	string
	close	boolean	false
	close-icon	string	'$delete'		'$delete'
	disabled	boolean	false
	draggable	boolean	false
	filter	boolean	false
	filter-icon	string	'$complete'	filter	'$complete'
	label	boolean	false
	link	boolean	false
	outlined	boolean	false
	pill	boolean	false	v-avatar
	tag	string	'span'		'span'
	text-color	string	undefined
	value	any	undefined	v-chip-group
Colorable	color	string	undefined
Themeable	dark	boolean	false		null
	light	boolean	false		null
Toggleable	input-value	any	undefined
Routable	active-class	string	-
	append	boolean	false
	exact	boolean	false		undefined
	exact-active-class	string	undefined
	link	boolean	-	href,to
	href	string or object	undefined	link
	to	string or object	undefined	link
	nuxt	boolean	false	nuxt-link
	replace	boolean	false
	ripple	boolean or object	undefined	v-ripple directive.	null
	tag	string	-
	target	string	undefined	href
Sizeable	large	boolean	false
	small	boolean	false
	x-large	boolean	false
	x-small	boolean	false

• input-value : アイテムのアクティブ状態を制御します。 これは通常、コンポーネントを強調表示するために使用されます。
• value : v-chip-groupの子の場合に使用される値。

実装例

テーマ

dark

ダークテーマの各チップ形状の一覧です。2段目は同一形状に対してdisabledプロパティを指定した無効化されたチップです。

<v-chip dark>default</v-chip>
<v-chip dark>
    <v-icon left>mdi-vuetify</v-icon>
    icon + default
</v-chip>
<v-chip dark label>label</v-chip>
<v-chip dark label>
    <v-icon left>mdi-vuetify</v-icon>
    icon + label
</v-chip>
<v-chip dark outlined>outlined</v-chip>
<v-chip dark outlined>
    <v-icon left>mdi-vuetify</v-icon>
    icon + outlined
</v-chip>
<v-chip dark filter :input-value="true">filter</v-chip>
<v-chip dark close>close</v-chip>
<v-chip dark close>
    <v-icon left>mdi-vuetify</v-icon>
    icon + close
</v-chip>

light

ライトテーマの各チップ形状の一覧です。lightプロパティ以外のソースコードはダークテーマと同一です。

カラー

カラーの指定では、チップ自体の色を指定するcolorプロパティとテキストの色を指定するtext-colorプロパティがあります。

<v-chip color="red" text-color="white">red</v-chip>

サイズ

サイズはデフォルトとx-small、small、large、x-largeの5種類があります。右側の5つはスロットにアイコンを指定したチップの例です。この例ではチップとアイコンのサイズを同じプロパティで合わせていますが、別々のサイズを指定してもかまいません。

<v-chip x-small>x-small</v-chip>
<v-chip small>small</v-chip>
<v-chip>default</v-chip>
<v-chip large>large</v-chip>
<v-chip x-large>x-large</v-chip>
<v-chip pill x-small><v-icon left x-small>mdi-star</v-icon>x-small</v-chip>
<v-chip pill small><v-icon left small>mdi-star</v-icon>small</v-chip>
<v-chip pill><v-icon left>mdi-star</v-icon>default</v-chip>
<v-chip pill large><v-icon left large>mdi-star</v-icon>large</v-chip>
<v-chip pill x-large><v-icon left x-large>mdi-star</v-icon>x-large</v-chip>

フィルター

filterプロパティを指定すると、input-valueプロパティの値がtrueのときにフィルターアイコンが表示されるようになります。
下のGIFアニメーションのようにクリックするとフィルターアイコンが表示されるように実装することができます。
フィルターアイコンはfilter-iconプロパティで任意のアイコンにすることもできます。

<v-chip
  filter
  :input-value="f1"
  :color="f1 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  @click="f1 = !f1"
  >filter</v-chip
>

<v-chip
  filter
  filter-icon="mdi-check-circle"
  :color="f2 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f2"
  @click="f2 = !f2"
  >filter</v-chip
>

<v-chip
  filter
  filter-icon="mdi-check-underline"
  :color="f3 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f3"
  @click="f3 = !f3"
  >filter</v-chip
>

<v-chip
  :color="f4 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f4"
  @click="f4 = !f4"
  v-text="f4 ? 'selected' : 'select'"
></v-chip>

<v-chip
  link
  filter
  :color="f5 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f5"
  :label="!f5"
  :ripple="false"
  @click="f5 = !f5"
  >filter</v-chip
>

クローズ

closeプロパティを指定するとチップにクローズアイコンが表示されます。ただしデフォルトではこのクローズアイコンをクリックしても下のGIFアニメーションのようにチップは消えません。
チップを消すにはactiveプロパティにfalseをセットする必要があるので、クローズアイコンをクリックすると発生するupdate:activeイベントか、click:closeイベントでactiveプロパティにfalseをセットするようにします。

<v-chip link close :active="c1" @update:active="c1 = $event">close</v-chip>
<v-chip link close close-icon="mdi-close" :active="c2" @update:active="c2 = $event">close</v-chip>
<v-chip link close close-icon="mdi-close-outline" :active="c3" @click:close="c3 = false">close</v-chip>

アバター

チップとアバターを組み合わせた例です。チップにpillプロパティを指定するとアバターのパディングを除去します。
下記はpillプロパティの有無とアバターのスロットにv-iconコンポーネント、タグ、v-imgコンポーネントを使った組み合わせになります。

<v-chip pill color="cyan" text-color="white" @click="pa1 = !pa1">
    <v-avatar left>
        <v-icon v-if="pa1" color="white">mdi-email</v-icon>
        <v-icon v-else color="white">mdi-email-lock</v-icon>
    </v-avatar>
    icon + pill
</v-chip>
<v-chip color="cyan" text-color="white" @click="pa2 = !pa2">
    <v-avatar left>
        <v-icon v-if="pa2" color="white">mdi-email</v-icon>
        <v-icon v-else color="white">mdi-email-lock</v-icon>
    </v-avatar>
    icon + no pill
</v-chip>
<v-chip pill link color="light-green lighten-1" @click="counter = counter + 1">
    <v-avatar left>
        <span class="pa-3 green darken-4 white--text">{{ counter }}</span>
    </v-avatar>
    text
</v-chip>
<v-chip link color="light-green lighten-1" @click="counter = counter + 1">
    <v-avatar left>
        <span class="pa-3 green darken-4 white--text">{{ counter }}</span>
    </v-avatar>
    text + no pill
</v-chip>
<v-chip pill link>
    <v-avatar left>
        <v-img :src="require('@/assets/logo.png')" alt="vuetify"></v-img>
    </v-avatar>
    image
</v-chip>
<v-chip link>
    <v-avatar left>
        <v-img :src="require('@/assets/logo.png')" alt="vuetify"></v-img>
    </v-avatar>
    image + no pill
</v-chip>

アイコン

チップとアイコンを組み合わせた例です。

<v-chip>
    <v-icon left>mdi-star</v-icon>
    mdi-star
</v-chip>
<v-chip>
    mdi-star
    <v-icon right>mdi-star</v-icon>
</v-chip>
<v-chip>
    <v-icon left>mdi-email</v-icon>
    mdi-email
</v-chip>
<v-chip>
    <v-icon left>mdi-cellphone-android</v-icon>
    mdi-cellphone-android
</v-chip>

リップル

linkプロパティを指定すると、チップにマウスカーソルを合わせるとカーソルがポインターになり、クリックするとリップル（波紋）のエフェクトが発生します。
デフォルトではクリックした点を中心に波紋が広がるエフェクトですが、center=trueという指定にすると必ずチップの中心から波紋が広がります。またclassで波紋の色を指定することもできます。
:ripple="false"とするとリップルのエフェクトは発生しなくなります。

<v-chip>no link</v-chip>
<v-chip link>link + ripple</v-chip>
<v-chip link :ripple="{ center: true }">link + center=true</v-chip>
<v-chip link :ripple="false">link + ripple=false</v-chip>

左端のlinkプロパティが無いチップはマウスカーソルを合わせてもポインターにならず、クリックしてもリップルは発生しません。

ページ遷移

チップをクリックしたときにページ遷移を行うにはto、nuxt、hrefプロパティを使います。
vue-routerの場合はto、Nuxtの場合はnuxt、外部のページへ遷移する場合はhrefが使用できます。hrefでは新しくタブを開きたい場合にtargetプロパティも使用できます。

<v-chip href="https://www.google.co.jp" target="_blank">HREF</v-chip>
<v-chip href="#top">#TOP</v-chip>
<v-chip :to="{ name: 'Home' }" active-class="blue" exact-active-class="cyan">to Home</v-chip>
<v-chip :to="{ name: 'Chip' }" active-class="blue" exact-active-class="cyan">to Chip</v-chip>
<v-chip :to="{ name: 'ChipGroup' }" active-class="blue" exact-active-class="cyan">to Chip Group</v-chip>

アクティブ

クローズの箇所でも触れましたがactiveプロパティにfalseを指定するとチップが非表示になります。

<v-container>
    <v-row justify="start">
        <v-col cols="auto">
            <v-chip>ON</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac1" link @click="ac1 = !ac1" color="red">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac2" link @click="ac2 = !ac2" color="pink">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac3" link @click="ac3 = !ac3" color="purple">active</v-chip>
        </v-col>
    </v-row>
    <v-row justify="start">
        <v-col cols="auto">
            <v-chip>OFF</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac1" link @click="ac1 = !ac1" outlined color="red">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac2" link @click="ac2 = !ac2" outlined color="pink">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac3" link @click="ac3 = !ac3" outlined color="purple">active</v-chip>
        </v-col>
    </v-row>
</v-container>

Events

click
チップがクリックされたときに発生します。.native修飾子が使用されていない限りクリックされるとリップルのエフェクトが発生します。

<v-chip @click="click">chip</v-chip>

メソッドの引数はMouseEventオブジェクトです。

methods: {
    click(e) {
      console.log('click:', e)
    }
}

click:close
closeアイコンがクリックされたときに生成されます。チップ自体のクリックには反応しません。

update:active
closeアイコンがクリックされたときに生成され、activeをfalseに設定します。

<v-chip close :active="active" @update:active="active = $event">chip</v-chip>

[Chip groups] (https://vuetifyjs.com/en/components/chip-groups)

Props

VChipGroup

• [VChipGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VChipGroup/VChipGroup.ts)
• [VSlideGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts)
• [VItemGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VItemGroup/VItemGroup.ts)
• [Proxyable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/proxyable/index.ts)

VChipGroup ---- VSlideGroup ---- VItemGroup ---- Groupable
           |                                `--- Proxyable
           |                                `--- Themeable
           |
           `--- Colorable

	name	type	default	relation	src
VChipGroup	column	boolean	false
VSlideGroup	active-class	string	'v-slide-item--active'		'v-slide-item--active'
	center-active	boolean	false
	next-icon	string	'$next'		'$next'
	mobile-break-point	number or string	1264		1264
	prev-icon	string	'$prev'		'$prev'
	show-arrows	boolean	false
VItemGroup	active-class	string	-		'v-item--active'
	mandatory	boolean	false
	max	number or string	undefined		null
	multiple	boolean	false	value
Proxyable	value	any	undefined
Themeable	dark	boolean	false		null
	light	boolean	false		null
Colorable	color	string	undefined

• multiple : 複数選択を許可します。 value propは配列でなければなりません。
• value : コンポーネントの指定されたモデル値。

実装例

テーマ

dark

ダークテーマのチップグループの表示です。左側(4つのチップ)のチップグループは表示領域に収まっていますが、右側(10このチップ)のチップグループは表示領域に収まらないため、右端にスクロール用の矢印アイコンが表示されています。これはデフォルトの動作ですが、columnプロパティで折り返し表示することもできます。

<v-row justify="space-around">
    <v-col cols="12" md="5" class="my-2 grey darken-3">
        <v-subheader class="white--text">dark theme</v-subheader>
        <v-chip-group v-model="d1" dark>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd2</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd3</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd4</v-chip>
        </v-chip-group>
    </v-col>
    <v-col cols="12" md="7" class="my-2 grey darken-3">
        <v-subheader class="white--text">dark theme</v-subheader>
        <v-chip-group v-model="d1" dark>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd2</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd3</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd4</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd5</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd6</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd7</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd8</v-chip>
            <v-chip pill><v-icon left>mdi-alpha-b-circle</v-icon>cmd9</v-chip>
            <v-chip pill><v-icon left>mdi-alpha-a-circle</v-icon>cmd10</v-chip>
        </v-chip-group>
    </v-col>
</v-row>

左端のチップがアクティブな状態です。

light

ライトテーマのチップグループの表示です。内容はダークテーマと同様です。

矢印アイコン

デフォルトではスクロールできる方向に矢印アイコンが表示されますが、show-arrowsプロパティを指定すると左右の矢印アイコンが必ず表示されます。

<v-subheader>show-arrows</v-subheader>
<v-chip-group show-arrows>
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>

左右の矢印アイコンはprev-icon、next-iconプロパティで変更することができます。

<v-subheader>show-arrows + prev-icon, next-icon</v-subheader>
<v-chip-group show-arrows prev-icon="mdi-chevron-left-box-outline" next-icon="mdi-chevron-right-box-outline">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>

選択したチップのカラー

active-classプロパティで選択したチップのカラーを指定できます。

<v-subheader>active-class</v-subheader>
<v-chip-group active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>

選択したチップを中央に表示

center-activeプロパティを指定すると選択したチップが中央に表示されるように調整されます。

<v-subheader>center-active</v-subheader>
<v-chip-group center-active active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>

カラム

columnプロパティを指定するとチップグループが表示幅に収まらない場合折り返して表示されます。この場合矢印アイコンは表示されません。

<v-subheader>column</v-subheader>
<v-chip-group column active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>

チップの選択

value

v-chipのvalueプロパティを指定しないと、デフォルトではインデックスが値として使用されます。下記の例では左端のチップから0、1、2、3とインデックスが振られます。

<v-subheader>value</v-subheader>
<v-chip-group v-model="selected1" active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>up</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>down</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>left</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>right</v-chip>
    <v-chip pill><v-icon left>mdi-alpha-a-circle</v-icon>a</v-chip>
    <v-chip pill><v-icon left>mdi-alpha-b-circle</v-icon>b</v-chip>
</v-chip-group>
<div>selected : {{ selected1 }}</div>

チップに任意の値を指定したい場合はvalueプロパティを使用します。

<v-subheader>value</v-subheader>
<v-chip-group v-model="selected2" active-class="primary--text">
    <v-chip pill value="up"><v-icon left>mdi-gamepad-round-up</v-icon>up</v-chip>
    <v-chip pill value="down"><v-icon left>mdi-gamepad-round-down</v-icon>down</v-chip>
    <v-chip pill value="left"><v-icon left>mdi-gamepad-round-left</v-icon>left</v-chip>
    <v-chip pill value="right"><v-icon left>mdi-gamepad-round-right</v-icon>right</v-chip>
    <v-chip pill value="a"><v-icon left>mdi-alpha-a-circle</v-icon>a</v-chip>
    <v-chip pill value="b"><v-icon left>mdi-alpha-b-circle</v-icon>b</v-chip>
</v-chip-group>
<div>selected : {{ selected2 }}</div>

単一

mandatoryプロパティを指定すると必ず1つだけ選択状態となるチップグループになります。

<v-subheader>mandatory</v-subheader>
<v-chip-group v-model="selected3" mandatory active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected : {{ selected3 }}</div>

複数 制限無し

multipleプロパティを指定すると0個以上が選択状態となるチップグループになります。

<v-subheader>multiple</v-subheader>
<v-chip-group v-model="selected4" multiple active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected({{ selected4.length }}) : {{ selected4 }}</div>

複数 制限有り

multipleとmaxプロパティを指定するとmax個まで選択できるチップグループになります。

<v-subheader>multiple + max=3</v-subheader>
<v-chip-group v-model="selected5" multiple max="3" active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected({{ selected5.length }}) : {{ selected5 }}</div>