배지 (Badge)
v-badge 컴포넌트는 특정 정보를 부각시키거나(highlight) 특정 요소에 대해 이목을 끌기 위해 사용되며 어떤 종류의 컨텐츠에도 사용할 수 있습니다.
API
이름
bottom
디폴트
false
타입
boolean
컴포넌트를 아랫쪽(bottom)으로 정렬
이름
color
디폴트
'primary'
타입
string
컨트롤에 색상을 지정
이름
left
디폴트
false
타입
boolean
요소를 왼쪽으로 정렬
이름
mode
디폴트
undefined
타입
string
트랜지션 모드를 설정(transition-group 에는 적용되지 않음)
이름
origin
디폴트
undefined
타입
string
트랜지션 중심(origin)을 설정
이름
overlap
디폴트
false
타입
boolean
컴포넌트가 슬롯에 추가된 컨덴츠와 중첩됨(Component will overlap the slotted content)
이름
transition
디폴트
'fab-transition'
타입
string
컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능
이름
value
디폴트
true
타입
any
표시여부를 조절 (Controls visibility)
예제
중첩 (Overlap)
overlap prop을 사용하면 배지는 컨텐츠 위에 중첩됩니다.
인라인 (Inline)
배지는 텍스트와 같은 줄 위에(inline) 놓일 수 있습니다.
아이콘 (Icon)
배지는 적용된 모든 아이콘 셋을 사용할 수 있습니다.
표시여부 (Visibility)
배지의 표시여부는 v-model 로 조절할 수 있습니다.