Code Label

코드값을 시각적으로 표현하기 위한 레이블 컴포넌트입니다. 주로 상태값이나 구분값을 표시할 때 사용됩니다. 색상과 텍스트를 커스터마이징할 수 있어 다양한 용도로 활용 가능합니다.

props

이름	타입	기본값	설명
model-value	string		배지의 값을 나타내는 문자열입니다. 이 값을 기준으로 색상과 레이블이 결정됩니다.
colors	object	{'*': ''}	model-value에 따른 배지의 색상을 정의하는 객체입니다. model-value와 일치하는 키가 있으면 해당 색상을 사용하고, 없을 경우 '*' 키의 색상을 사용합니다.
labels	object		model-value에 따른 배지의 레이블을 정의하는 객체입니다. model-value와 일치하는 키가 있으면 해당 레이블을 사용하고, 없을 경우 '*' 키의 레이블을 사용합니다.
outline	boolean	false	배지의 외곽선 스타일 적용 여부를 나타냅니다. true로 설정하면 외곽선이 있는 배지가 표시됩니다

예제1. 매핑할 데이터를 labels 속성으로 조정합니다.

  <code-label model-value="g" :labels="{'g':'일반회원', 'm':'어린이회원', 'f':'외국인'}" />
  <code-label model-value="m" :labels="{'g':'일반회원', 'm':'어린이회원', 'f':'외국인'}" />
  <code-label model-value="f" :labels="{'g':'일반회원', 'm':'어린이회원', 'f':'외국인'}" />

예제2. 배경 컬러를 colors 속성으로 조정합니다.

  <code-label model-value="f" :labels="{'m':'어린이회원', 'f':'외국인'}" :colors="{'m': 'info', 'f': 'danger'}"/>