v-chip コンポーネントは小さな情報の断片を伝えるために使用されます。close プロパティを使用すると、Chip はインタラクティブとなり、ユーザーの入力を受け付けられるようになります。

Usage

Chips come in the following variations: Default, closeable, filter, outlined, pill. The default slot of v-chip will also accept avatars and icons alongside text.

API

Examples

色付き

マテリアルデザインパレットのあらゆる色を使用して Chip に色を付けることができます。

アイコン

Chip にはテキストのほか、Material Icons フォントに含まれるアイコンを使用することができます。

Outlined

アウトライン Chip は指定されているテキストの色を元にボーダーカラーが適用されます。

ラベル

ラベル Chip は v-card の border-radius を使用します。

Sizes

v-chip component can have various sizes from x-small to x-large.

Draggable

draggable v-chip component can be dragged by mouse.

Filter

v-chip component has filter option which shows an additional icon to you if chip is active. It can be customized using filter-icon.

No ripple

v-chip can be rendered without ripple if ripple prop is set to false.

閉じるボタン付きラベル

Closable chips can be controlled with a v-model. You can also listen to the click:close event if you want to know when a chip has been closed.

Action chips

Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.

Select との組み合わせ

Select では、選択された項目を表示するために Chip を使用することができます。

Custom lists

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.

Additional filtering

Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.

Expandable

Chips can be combined with v-menu to enable a specific set of actions for a chip.

Edit this page | language on Github
Vuetify
StoreFor Enterprise