Chip
v-chip コンポーネントは小さな情報の断片を伝えるために使用されます。close プロパティを使用すると、Chip はインタラクティブとなり、ユーザーの入力を受け付けられるようになります。
API
Name
close
Default
false
Type
boolean
閉じるボタンを追加します。
Name
color
Default
undefined
Type
string
コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。
Name
dark
Default
false
Type
boolean
ダークテーマを適用します。
Name
disabled
Default
false
Type
boolean
Chip を無効化し、選択できないようにします。
Name
label
Default
false
Type
boolean
丸みを削除します。
Name
light
Default
false
Type
boolean
ライトテーマを適用します。
Name
outline
Default
false
Type
boolean
背景を削除しテキストカラーとボーダーカラーを適用します。
Name
selected
Default
false
Type
boolean
Chip が選択された状態の色を適用します。 主に v-select でハイライト表示するために使用します。
Name
small
Default
false
Type
boolean
Chip のサイズを縮小します。
Name
text-color
Default
undefined
Type
string
Components.Chips.
Name
value
Default
true
Type
boolean
Components.Chips.
Examples
色付き
マテリアルデザインパレットのあらゆる色を使用して Chip に色を付けることができます。
アイコン
Chip にはテキストのほか、Material Icons フォントに含まれるアイコンを使用することができます。
アウトライン
アウトライン Chip は指定されているテキストの色を元にボーダーカラーが適用されます。
ラベル
ラベル Chip は v-card の border-radius を使用します。
閉じるボタン付きラベル
閉じるボタン付きラベルは v-model によって制御可能です。 Chip が閉じられたタイミングを検知したい場合は input イベントを使用してください。
Select との組み合わせ
Select では、選択された項目を表示するために Chip を使用することができます。