# Chips
v-chip コンポーネントは、小さな情報を伝えるために使用されます。 close プロパティを使用すると、チップはインタラクティブになり、ユーザとのやり取りが可能になります。 v-chip-group によって高度な選択オプションにも使用されます。
# 使い方
チップには、closeable, filter, outlined, pill のバリエーションがあります。 v-chip のデフォルトスロットは、テキストと並んでアバターとアイコンを受け付けます。
# API
# サンプル
# Props
# 閉じるボタン付きラベル
クローズ可能なチップは、v-modelで制御できます。 チップが閉じられたタイミングを検知したい場合はclick:closeイベントを使うこともできます。
# 色付き
マテリアルデザインパレットのあらゆる色を使用して Chip に色を付けることができます。
# Draggable
draggable v-chip コンポーネントはマウスでドラッグできます。
# Filter
v-chipコンポーネントにはチップがアクティブなときに追加のアイコンを表示するfilterオプションがあります。 アイコンはfilter-iconを使ってカスタマイズできます。
# Label
ラベル Chip は v-card の border-radius を使用します。
# リップル効果を表示しない
v-chip は ripple prop が false に設定されている場合、リップルなしでレンダリングできます。
# Outlined
アウトライン Chip は指定されているテキストの色を元にボーダーカラーが適用されます。
# サイズ
v-chip コンポーネントは、 x-small から x-large まで、さまざまなサイズにできます。
# イベント
# Actionを伴うチップ
チップはアクショナブルなアイテムとして使うことができます。 _click_イベントが与えられると、チップはインタラクティブになり、メソッドを呼び出せるようになります。
# Slots
# Icon
Chip にはテキストのほか、Material Icons フォントに含まれるアイコンを使用することができます。
# その他
# カスタムリスト
この例では、v-autocompleteの代わりにカスタマイズされたリストを使っています。 これにより、検索と選択という機能はそのままに、常に利用可能な選択肢を表示することができます。
# 伸縮自在
チップは v-menu と組み合わせることで、チップに対する特定のアクションセットを有効にすることができます。
# フィルタリング
チップは、特定のタスクに補足的なアクションを提供するのに最適です。 この例では、アイテムのリストを検索し、情報のサブセットを収集して、使用可能なキーワードを表示しています。
# Select との組み合わせ
選択したデータを表示するためにチップを使用できます。 以下に独自のタグを追加してみてください。