칩 (Chip)
v-chip 컴포넌트는 작은 조각의 정보를 전달하는데 사용합니다. close 속성을 사용하면 더 인터랙티브(대화형)해집니다.
API
이름
close
디폴트
false
타입
boolean
제거(닫기) 버튼 추가
이름
color
디폴트
undefined
타입
string
컨트롤에 색상을 지정
이름
dark
디폴트
false
타입
boolean
다크 테마를 적용
이름
disabled
디폴트
false
타입
boolean
칩을 비활성화 하고 선택할 수 없게 만듬
이름
label
디폴트
false
타입
boolean
둥근 테두리를 제거
이름
light
디폴트
false
타입
boolean
라이트 테마를 적용
이름
outline
디폴트
false
타입
boolean
배경(background)를 제거하고 테두리(border)와 텍스트 색을 적용
이름
selected
디폴트
false
타입
boolean
Selection color 를 칩에 적용. 주로 v-select 에서 선택을 강조하기 위해 사용됨
이름
small
디폴트
false
타입
boolean
작은 칩
이름
text-color
디폴트
undefined
타입
string
컨트롤 텍스트에 지정된 색을 적용
이름
value
디폴트
true
타입
boolean
표시여부를 조절 (Controls visibility)
예제
색상 (Colored)
머티리얼 디자인 팔레트의 어떤 색이는 칩의 색으로 쓸 수 있습니다.
아이콘 (Icon)
텍스트뿐 아니라 머티리얼 아이콘 폰트 라이브러이의 아이콘도 사용할 수 있습니다.
테두리형 (Outline)
테두리형 칩의 경계(border) 색은 현대 텍스트 색으로부터 상속됩니다.
레이블 (Label)
레이블 칩은 v-card의 테두리 반경(border-radious)를 사용합니다.
닫기가능 (Closable)
닫기가 가능한 칩(Closable chips)은 v-model로 제어합니다. 칩이 닫혀있는지 알려면 input 이벤트를 Listen 하면 됩니다.
Select 에 사용 (In selects)
Select 시 선택된 데이터를 표시할때 칩을 사용할 수 있습니다.