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
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
v-chip can be rendered without ripple if
ripple prop is set to
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: