태그 (Tag)

태그 (Tag)

출처: 문서

본문

표시(marking)와 선택(selection)에 사용하는 컴포넌트예요.

기본 사용법 (Basic Usage)

type 속성으로 Tag의 타입을 정의해요. 또한 color 속성을 사용해서 Tag의 배경 색상을 설정할 수도 있어요.

제거 가능한 태그 (Removable Tag)

closable 속성으로 제거 가능한 태그를 정의할 수 있어요. Boolean을 받아요. 기본적으로 Tag 제거에는 페이딩 애니메이션이 있어요. 사용하고 싶지 않다면 Boolean을 받는 disable-transitions 속성을 true로 설정하면 돼요. close 이벤트는 Tag가 제거될 때 트리거돼요.

import { ref } from 'vue'

import type { TagProps } from 'element-plus'

interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])

동적 편집 (Edit Dynamically)

close 이벤트를 사용해서 태그를 동적으로 추가하고 제거할 수 있어요.

import { nextTick, ref } from 'vue'

import type { InputInstance } from 'element-plus'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

크기 (Sizes)

기본 크기 외에도 Tag 컴포넌트는 다양한 시나리오에 맞춰 선택할 수 있는 세 가지 추가 크기를 제공해요. size 속성을 사용해서 large, default, small 크기를 설정할 수 있어요.

테마 (Theme)

Tag는 dark, light, plain 세 가지 테마를 제공해요. effect로 변경할 수 있고, 기본값은 light예요.

    Light
      {{ item.label }}

    Plain
      {{ item.label }}

import { ref } from 'vue'

import type { TagProps } from 'element-plus'

type Item = { type: TagProps['type']; label: string }

const items = ref>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])

둥근 모서리 (Rounded)

Tag도 버튼처럼 둥글게 만들 수 있어요.

      {{ item.label }}

      {{ item.label }}

import { ref } from 'vue'

import type { TagProps } from 'element-plus'

type Item = { type: TagProps['type']; label: string }

const items = ref>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])

선택 가능한 태그 (Checkable Tag)

비즈니스 요구 때문에 체크박스 같은 태그가 필요할 때가 있어요. 하지만 버튼 같은 체크박스로는 요구를 충족할 수 없죠. 그래서 check-tag가 나왔어요. 2.5.4에서는 type prop을 사용할 수 있어요. 기본 check-tag 사용법이며 API가 아주 간단해요.

import { ref } from 'vue'

const checked = ref(false)
const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)

const onChange = (status: boolean) => {
  checked.value = status
}

const onChange1 = (status: boolean) => {
  checked1.value = status
}

const onChange2 = (status: boolean) => {
  checked2.value = status
}

const onChange3 = (status: boolean) => {
  checked3.value = status
}

const onChange4 = (status: boolean) => {
  checked4.value = status
}

const onChange5 = (status: boolean) => {
  checked5.value = status
}

const onChange6 = (status: boolean) => {
  checked6.value = status
}

Tag API

Tag 속성 (Attributes)

Tag 이벤트 (Events)

Tag 슬롯 (Slots)

CheckTag API

CheckTag 속성 (Attributes)

CheckTag 이벤트 (Events)

CheckTag 슬롯 (Slots)

더 알아보기 (Learn more)