Tag 태그

가벼운 태그입니다. type 의미 색상 + round/hit 형태 + 닫기 가능을 지원합니다.

태그

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>기본</LhTag>
      <LhTag type="primary">주요</LhTag>
      <LhTag type="success">성공</LhTag>
      <LhTag type="warning">경고</LhTag>
      <LhTag type="danger">위험</LhTag>
      <LhTag type="info">정보</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">소형</LhTag>
      <LhTag size="medium">기본 크기</LhTag>
      <LhTag size="large">대형</LhTag>
      <LhTag type="primary" round>둥근 모서리</LhTag>
      <LhTag type="primary" hit>테두리(hit)</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">닫기 가능</LhTag>
      <LhTag v-if="!closed" type="info" round">닫힌 후 숨김</LhTag>
      <LhTag type="warning" disabled>비활성화</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

프로퍼티	설명	타입	기본값
type	의미 색상	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	크기	'small' \| 'medium' \| 'large'	'medium'
closable	닫기 버튼 표시 (aria-label 은 언어 패키지에서 가져옴)	boolean	false
disabled	비활성화 (닫기 버튼 차단)	boolean	false
round / hit	둥근 모서리 / 테두리 강조	boolean	false
onClose	닫기 콜백 (close 이벤트와 공존)	(e: Event) => void	—
sx	sx 레이아웃 단축	—	—

Events

이벤트	설명	콜백 매개변수
click	클릭 시 트리거	(e: MouseEvent)
close	닫기 버튼 클릭 시 트리거 (onClose prop 과 공존)	(e: Event)