Тег

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`	—

События

Событие	Описание	Тип
click	Срабатывает при клике по тегу	`(e: MouseEvent) => void`
close	Срабатывает при закрытии тега	`(e: Event) => void`

Слоты

Слот	Описание
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 API ​

Props ​

События ​

Слоты ​

Доступность ​

Определения типов ​

Тег