UI 가이드

다크 모드

ScInputChip ​

ScInputChip은 태그 입력이나 선택 항목을 칩(chip) 형태로 시각화하여 표현하는 UI 컴포넌트입니다.
각 칩은 제거 가능하며, 다양한 상태 조절 및 커스터마이징이 가능합니다.

✅ 기본 사용법 ​

primary chip
point chip
default chip
red chip
orange chip
vue
<sc-input-chip color="primary">primary chip</sc-input-chip>
<sc-input-chip color="point">point chip</sc-input-chip>
<sc-input-chip>default chip</sc-input-chip>
<sc-input-chip color="red">red chip</sc-input-chip>
<sc-input-chip color="orange">orange chip</sc-input-chip>

✨ 사용 예시 모음 ​

▸ size 사이즈 ​

primary chip
default chip
red chip
orange chip
green chip
primary chip
default chip
red chip
orange chip
green chip
vue
<div>
  <sc-input-chip color="primary" size="small">primary chip</sc-input-chip>
  <sc-input-chip size="small">default chip</sc-input-chip>
  <sc-input-chip color="red" size="small">red chip</sc-input-chip>
  <sc-input-chip color="orange" size="small">orange chip</sc-input-chip>
  <sc-input-chip color="green" size="small">green chip</sc-input-chip>
</div>
<div>
  <sc-input-chip color="primary" size="medium">primary chip</sc-input-chip>
  <sc-input-chip size="medium">default chip</sc-input-chip>
  <sc-input-chip color="red" size="medium">red chip</sc-input-chip>
  <sc-input-chip color="orange" size="medium">orange chip</sc-input-chip>
  <sc-input-chip color="green" size="medium">green chip</sc-input-chip>
</div>

▸ disabled 비활성화 ​

primary chip
default chip
red chip
orange chip
green chip
vue
<sc-input-chip color="primary" disabled>primary chip</sc-input-chip>
<sc-input-chip disabled>default chip</sc-input-chip>
<sc-input-chip color="red" disabled>red chip</sc-input-chip>
<sc-input-chip color="orange" disabled>orange chip</sc-input-chip>
<sc-input-chip color="green" disabled>green chip</sc-input-chip>

▸ removable 삭제버튼 @click-delete ​

primary chip
default chip
red chip
orange chip
green chip
vue
<sc-input-chip
  removable
  v-for="(item, idx) in chips"
  :key="idx"
  :color="item.color"
  :item="item"
  @click-delete="onDeleteClick"
>
  {{ item.value }}
</sc-input-chip>

<script setup>
import { ref } from 'vue';

const chips = ref([
  { color: 'primary', value: 'primary chip' },
  { color: '', value: 'default chip' },
  { color: 'red', value: 'red chip' },
  { color: 'orange', value: 'orange chip' },
  { color: 'green', value: 'green chip' },
]);

// 여기서 아이템 삭제 로직을 구현할 수 있습니다.
function onDeleteClick(item) {
  chips.value = chips.value.filter((chip) => item !== chip);
}

</script>

🛠️ 속성 (Props) ​

이름타입기본값설명
itemobject{}칩에 표시할 데이터 (label 등)
colorstring'default'색상 클래스 지정 (primary 등)
size'small' | 'medium''medium'칩 크기
removablebooleanfalse칩 삭제 버튼 표시 여부
disabledbooleanfalse비활성화 여부

📤 이벤트 (Emits) ​

이벤트 이름설명
click-delete삭제 버튼 클릭 시 발생

🔳 슬롯 (Slots) ​

슬롯 이름설명
default칩 안쪽 콘텐츠를 커스터마이징할 때 사용

🎨 스타일 클래스 ​

클래스 이름설명
sc-input-chip전체 wrapper 클래스

📝 기타 참고사항 ​

  • item 객체 내 어떤 필드를 출력할지(label, value 등)는 컴포넌트 내부 구현에 따라 다를 수 있습니다.
  • removable이 true일 경우 x(삭제) 버튼이 표시됩니다.
  • disabled 상태에서는 칩 클릭 및 삭제가 모두 불가능합니다.