Tag 태그

LhTag는 식별과 분류에 사용합니다.

기본 사용법

태그 1태그 2태그 3

vue

<script setup lang="ts">
import { LhTag } from '@lh-ui/vue3'
</script>

<template>
  <LhTag>태그 1</LhTag>
  <LhTag>태그 2</LhTag>
  <LhTag>태그 3</LhTag>
</template>

vue

<script>
import { LhTag } from '@lh-ui/vue3'

export default {
  components: { LhTag }
}
</script>

<template>
  <LhTag>태그 1</LhTag>
  <LhTag>태그 2</LhTag>
  <LhTag>태그 3</LhTag>
</template>

유형

주요 태그성공 태그경고 태그위험 태그정보 태그

vue

<script setup lang="ts">
</script>

<template>
  <LhTag type="primary">주요 태그</LhTag>
  <LhTag type="success">성공 태그</LhTag>
  <LhTag type="warning">경고 태그</LhTag>
  <LhTag type="danger">위험 태그</LhTag>
  <LhTag type="info">정보 태그</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag type="primary">주요 태그</LhTag>
  <LhTag type="success">성공 태그</LhTag>
  <LhTag type="warning">경고 태그</LhTag>
  <LhTag type="danger">위험 태그</LhTag>
  <LhTag type="info">정보 태그</LhTag>
</template>

크기

작은 태그중간 태그큰 태그

vue

<script setup lang="ts">
</script>

<template>
  <LhTag size="small">작은 태그</LhTag>
  <LhTag size="medium">중간 태그</LhTag>
  <LhTag size="large">큰 태그</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag size="small">작은 태그</LhTag>
  <LhTag size="medium">중간 태그</LhTag>
  <LhTag size="large">큰 태그</LhTag>
</template>

닫기 가능

태그 1태그 2비활성화 태그

vue

<script setup lang="ts">
import { ref } from 'vue'

const show1 = ref(true)
const show2 = ref(true)
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">태그 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">태그 2</LhTag>
  <LhTag disabled>비활성화 태그</LhTag>
</template>

vue

<script>
export default {
  data() {
    return {
      show1: true,
      show2: true,
    }
  },
}
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">태그 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">태그 2</LhTag>
</template>

둥근 모서리와 표시

둥근 모서리 태그테두리 강조 태그둥근 모서리 표시

vue

<script setup lang="ts">
</script>

<template>
  <LhTag round>둥근 모서리 태그</LhTag>
  <LhTag hit>테두리 강조 태그</LhTag>
  <LhTag round hit>둥근 모서리 표시</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag round>둥근 모서리 태그</LhTag>
  <LhTag hit>테두리 강조 태그</LhTag>
  <LhTag round hit>둥근 모서리 표시</LhTag>
</template>

커스텀 테마

태그에 커스텀 색상 테마를 적용합니다.

송화록 태그성공

vue

<script setup lang="ts">
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

const songhuaTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#7BB079',
  'primary-color-bg': '#E8F5E8',
}
</script>

<template>
  <!-- 부분 테마: 송화록 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">송화록 태그</LhTag>
    <LhTag type="success">성공</LhTag>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag },
  data() {
    return {
      songhuaTheme: {
        'primary-color': '#5B8C5A',
        'primary-color-hover': '#7BB079',
        'primary-color-bg': '#E8F5E8',
      },
    }
  },
}
</script>

<template>
  <!-- 부분 테마: 송화록 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">송화록 태그</LhTag>
    <LhTag type="success">성공</LhTag>
  </LhConfigProvider>
</template>

더 많은 테마는 테마 커스터마이징을 참조하세요.

다국어

태그 텍스트는 LhConfigProvider와 언어 팩을 통해 다국어 전환을 구현할 수 있습니다.

标签

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- ConfigProvider로 언어 팩 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- ConfigProvider로 언어 팩 전환 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Tag API

Props

프로퍼티	설명	타입	기본값
type	태그 유형	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'default'`
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
closable	닫기 가능 여부	`boolean`	`false`
disabled	비활성화 여부	`boolean`	`false`
round	둥근 모서리 여부	`boolean`	`false`
hit	테두리 강조 여부	`boolean`	`false`
onClose	닫을 때의 커스텀 처리	`(e: Event) => void`	—
sx	빠른 레이아웃 속성 (예: `{ mt: 2, w: '50%' }`), 인라인 스타일로 변환되어 루트 요소에 적용	`LhSxProps`	—

Events

이벤트	설명	타입
click	태그를 클릭할 때 트리거	`(e: MouseEvent) => void`
close	태그를 닫을 때 트리거	`(e: Event) => void`

Slots

슬롯	설명
default	태그 콘텐츠

무장애

닫기 버튼은 순수 아이콘 버튼이며, aria-label은 언어 팩 tag.close (中文「关闭」)에서 가져와 ConfigProvider의 언어에 따라 전환됩니다
닫기 버튼 안의 <svg> 아이콘은 aria-hidden으로 표시되어 스크린 리더의 중복 방송을 피합니다
태그 텍스트 자체는 직접 읽을 수 있어 별도의 이름 지정이 필요 없습니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/tag/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhTagProps

export interface LhTagProps {
  type?: LhTagType
  size?: LhTagSize
  closable?: boolean
  disabled?: boolean
  round?: boolean
  hit?: boolean
  /** 닫을 때의 커스텀 처리 */
  onClose?: (e: Event) => void
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhTagSize

export type LhTagSize = LhComponentSize

LhTagType _{(출처: @lh-ui/share/core/tag)}

export type LhTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'

LhComponentSize _{(출처: @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Tag 태그 ​

기본 사용법 ​

유형 ​

크기 ​

닫기 가능 ​

둥근 모서리와 표시 ​

커스텀 테마 ​

다국어 ​

Tag API ​

Props ​

Events ​

Slots ​

무장애 ​

타입 정의 ​