v-chip 컴포넌트는 작은 조각의 정보를 전달하는데 사용합니다. close 속성을 사용하면 더 인터랙티브(대화형)해집니다.

사용법

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

예제

색상 (Colored)

머티리얼 디자인 팔레트의 어떤 색이는 칩의 색으로 쓸 수 있습니다.

아이콘 (Icon)

텍스트뿐 아니라 머티리얼 아이콘 폰트 라이브러이의 아이콘도 사용할 수 있습니다.

Outlined

테두리형 칩의 경계(border) 색은 현대 텍스트 색으로부터 상속됩니다.

레이블 (Label)

레이블 칩은 v-card의 테두리 반경(border-radious)를 사용합니다.

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)

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.

In selects

Selects can use chips to display the selected data. Try adding your own tags below.

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
상점For Enterprise