Chip

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

Usage

Chips come in 4 primary variations. Regular, with icon, with portrait and closeable.

API

v-chip
Name
close
Default
false
Type
boolean

閉じるボタンを追加します。

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(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 を使用することができます。

Edit this page | language on Github