상점

기업

The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. This component is used by the v-chip-group for advanced selection options.

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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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

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

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

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

draggable v-chip component can be dragged by mouse.

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

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.

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

Select 시 선택된 데이터를 표시할때 칩을 사용할 수 있습니다.

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.

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.

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

Ready for more? Continue reading with:

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