Vuetify

ショップ

企業向け

v-chip コンポーネントは、小さな情報を伝えるために使用されます。closeプロパティを使用すると、チップはインタラクティブになり、ユーザーとの対話が可能になります。このコンポーネントは、v-chip-group によって高度な選択オプションに使用されます。

チップは、次のバリエーションで提供されます: Default, closeable, filter, outlined, pill。v-chip のデフォルトスロットは、テキストと一緒にアバターとアイコンも受け入れます。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

マテリアルデザインパレットのあらゆる色を使用して 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と組み合わせて、特定のアクションセットを有効にすることができます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!