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.
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
머티리얼 디자인 팔레트의 어떤 색이는 칩의 색으로 쓸 수 있습니다.
텍스트뿐 아니라 머티리얼 아이콘 폰트 라이브러이의 아이콘도 사용할 수 있습니다.
테두리형 칩의 경계(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.