Tag 태그

여러 개의 태그를 표시할 수 있는 태그 컴포넌트예요.

출처: 문서

본문

태그 표시 컴포넌트예요.

언제 사용하나요?

사용자가 여러 개의 태그를 표시해야 할 때 사용해요.

기본 사용법

:::demo type 속성으로 tag의 유형을 고를 수 있고, color 속성으로 테마 색을 직접 지정할 수도 있어요

<template>
  <div class="tag-demo-wrapper">
    <d-tag>标签一</d-tag>
    <d-tag type="primary">标签二</d-tag>
    <d-tag type="success">标签三</d-tag>
    <d-tag type="warning">标签四</d-tag>
    <d-tag type="danger">标签五</d-tag>
  </div>
  <div class="tag-demo-wrapper">
    <d-tag color="blue-w98">blue-w98</d-tag>
    <d-tag color="aqua-w98">aqua-w98</d-tag>
    <d-tag color="aqua-w98">aqua-w98</d-tag>
    <d-tag color="olivine-w98">olivine-w98</d-tag>
    <d-tag color="green-w98">green-w98</d-tag>
    <d-tag color="yellow-w98">yellow-w98</d-tag>
    <d-tag color="orange-w98">orange-w98</d-tag>
    <d-tag color="red-w98">red-w98</d-tag>
    <d-tag color="pink-w98">pink-w98</d-tag>
    <d-tag color="purple-w98">purple-w98</d-tag>
    <d-tag color="#aa2116">#aa2116</d-tag>
    <d-tag color="#007d65">#007d65</d-tag>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style>
.tag-demo-wrapper > * {
  margin: 4px;
}
</style>

:::

커스터마이즈

:::demo 기본 슬롯을 사용하면 tag를 자유롭게 꾸밀 수 있어요

<template>
  <div class="tag-demo-wrapper">
    <d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
    <d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
    <d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isChecked = ref(true);
    const tagClick = () => {
      isChecked.value = !isChecked.value;
    };
    return { isChecked, tagClick };
  },
});
</script>

:::

선택 가능

:::demo checked 속성으로 tag의 선택 상태를 설정하고, 클릭으로 checked 값을 바꿀 수 있어요

<template>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
    <d-tag color="#39afcc" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isChecked = ref(true);
    const tagClick = () => {
      isChecked.value = !isChecked.value;
    };
    return { isChecked, tagClick };
  },
});
</script>

:::

제거 가능

:::demo deletable 속성으로 태그를 삭제할 수 있는지 설정해요

<template>
  <div class="tag-demo-wrapper">
    <d-tag v-for="item in tagList" deletable :key="item" @tag-delete="() => handleClose(item)">{{ item }}</d-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const tagList = ref(['tag1', 'tag2', 'tag3']);
    const handleClose = (item) => {
      tagList.value.splice(tagList.value.indexOf(item), 1);
    };
    return {
      tagList,
      handleClose,
    };
  },
});
</script>

:::

다양한 크기

:::demo Tag의 기본 크기는 md이고, lg、md、sm 세 가지 크기 중 고를 수 있어요

<template>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" size="lg">Large</d-tag>
    <d-tag type="success" size="md">Middle</d-tag>
    <d-tag type="warning" size="sm">Small</d-tag>
  </div>
  <div class="tag-demo-wrapper">
    <d-tag type="primary" deletable size="lg">Large</d-tag>
    <d-tag type="primary" deletable size="md">Middle</d-tag>
    <d-tag type="primary" deletable size="sm">Small</d-tag>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

:::

Tag 파라미터

Tag 이벤트

Tag 타입

TagType

type TagType = 'primary' | 'success' | 'warning' | 'danger';

SizeType

type SizeType = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

d-tag는 상태 라벨이나 분류 배지를 붙이는 가장 기본적인 수단이에요. deletable로 삭제 버튼을 얹거나 checked로 토글형 필터 칩을 만드는 등 인터랙션까지 확장할 수 있어요.