v-chip コンポーネントは、小さな情報を伝えるために使用されます。closeプロパティを使用すると、チップはインタラクティブになり、ユーザーとの対話が可能になります。このコンポーネントは、v-chip-group によって高度な選択オプションに使用されます。
チップは、次のバリエーションで提供されます: Default, closeable, filter, outlined, pill。v-chip のデフォルトスロットは、テキストと一緒にアバターとアイコンも受け入れます。
以下に、簡単な例から複雑な例まで示します。
マテリアルデザインパレットのあらゆる色を使用して Chip に色を付けることができます。
Chip にはテキストのほか、Material Icons フォントに含まれるアイコンを使用することができます。
アウトライン Chip は指定されているテキストの色を元にボーダーカラーが適用されます。
ラベル Chip は v-card の border-radius を使用します。
v-chip コンポーネントは、x-small から x-large までさまざまなサイズを持つことができます。
draggable v-chip コンポーネントはマウスでドラッグできます。
v-chip コンポーネントには、チップがアクティブな場合に追加のアイコンを表示する filter オプションがあります。filter-iconを使用してカスタマイズすることができます。
ripple propが false に設定されている場合、v-chip をリップル効果なしでレンダリングできます。
閉じるボタン付きラベルは v-model によって制御可能です。 Chip が閉じられたタイミングを検知したい場合は click:close イベントを使用することもできます。
チップは、アクション可能なアイテムとして使用できます。click イベントを提供すると、チップはインタラクティブになり、メソッドを呼び出すことができます。
Select では、選択された項目を表示するために Chip を使用することができます。
In this example we opt to use a customized list instead of v-autocomplete. This allows us to always display the options available while still providing the same functionality of search and selection.
チップは、特定のタスクに補助的なアクションを提供するのに最適です。この例では、項目のリストを検索し、使用可能なキーワードを表示するために情報のサブセットを収集しています。
チップをv-menuと組み合わせて、特定のアクションセットを有効にすることができます。