KRDS Vue

태그 Tag ​

태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다. 콘텐츠 항목에 직접 관련 분류 체계, 데이터 속성을 표시하거나, 목록에서 특정 분류 체계, 데이터 속성을 가진 항목이 선택되었음을 보여주기 위한 태그 그룹으로 사용된다.

KRDS 가이드

기본 ​

링크가 아닌 태그에는 삭제 버튼이 함께 표시되며, 누르면 remove 이벤트가 발생합니다.

버튼
vue
<script setup lang="ts">
  import { KrdsTag, KrdsTagGroup } from '@krds.ui/vue'
</script>

<template>
  <KrdsTagGroup>
    <KrdsTag>버튼</KrdsTag>
  </KrdsTagGroup>
</template>

사이즈 ​

크기는 KrdsTagGroup의 size로 지정합니다.

태그태그태그
태그태그태그
태그태그태그
vue
<script setup lang="ts">
  import { KrdsTag, KrdsTagGroup } from '@krds.ui/vue'
</script>

<template>
  <div>
    <KrdsTagGroup size="large" style="margin-bottom: 1rem">
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
    </KrdsTagGroup>

    <KrdsTagGroup size="medium" style="margin-bottom: 1rem">
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
    </KrdsTagGroup>

    <KrdsTagGroup size="small">
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
      <KrdsTag>태그</KrdsTag>
    </KrdsTagGroup>
  </div>
</template>

링크 태그 ​

link를 지정하면 삭제 버튼 없이 href로 이동하는 링크로 렌더링됩니다.

vue
<script setup lang="ts">
  import { KrdsTag, KrdsTagGroup } from '@krds.ui/vue'
</script>

<template>
  <div>
    <KrdsTagGroup size="large" style="margin-bottom: 1rem">
      <KrdsTag link href="#">카테고리</KrdsTag>
      <KrdsTag link href="https://example.com" target="_blank" rel="noopener">외부 링크</KrdsTag>
      <KrdsTag link href="#">필터 태그</KrdsTag>
    </KrdsTagGroup>

    <KrdsTagGroup size="medium" style="margin-bottom: 1rem">
      <KrdsTag link href="#">카테고리</KrdsTag>
      <KrdsTag link href="https://example.com" target="_blank" rel="noopener">외부 링크</KrdsTag>
      <KrdsTag link href="#">필터 태그</KrdsTag>
    </KrdsTagGroup>

    <KrdsTagGroup size="small">
      <KrdsTag link href="#">카테고리</KrdsTag>
      <KrdsTag link href="https://example.com" target="_blank" rel="noopener">외부 링크</KrdsTag>
      <KrdsTag link href="#">필터 태그</KrdsTag>
    </KrdsTagGroup>
  </div>
</template>

슬롯 사용 ​

remove 이벤트에서 목록을 갱신해 태그를 삭제합니다.

커스텀 내용 1커스텀 내용 2링크 태그
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsTag, KrdsTagGroup } from '@krds.ui/vue'

  const tags = ref(['커스텀 내용 1', '커스텀 내용 2'])

  const handleRemove = (tag: string) => {
    tags.value = tags.value.filter(t => t !== tag)
  }
</script>

<template>
  <KrdsTagGroup size="medium">
    <KrdsTag v-for="tag in tags" :key="tag" @remove="handleRemove(tag)">{{ tag }}</KrdsTag>
    <KrdsTag link href="#">링크 태그</KrdsTag>
  </KrdsTagGroup>
</template>

KrdsTag ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
linkbooleanfalse링크 태그 여부
hrefstring'#'링크 URL (link가 true일 때 사용)
targetstring-링크 타겟 (link가 true일 때 사용)
relstring-링크 관계 (link가 true일 때 사용)

Events

이름인자설명
remove[event: MouseEvent]삭제 버튼을 클릭했을 때

Slots

이름설명
default태그 글자

KrdsTagGroup ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
sizeKrdsTagGroupSize'medium'태그 그룹 크기

Slots

이름설명
default태그 (KrdsTag)