Etiqueta

LhTag sirve para marcar y clasificar.

Uso básico

Etiqueta 1Etiqueta 2Etiqueta 3

vue

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

<template>
  <LhTag>Etiqueta 1</LhTag>
  <LhTag>Etiqueta 2</LhTag>
  <LhTag>Etiqueta 3</LhTag>
</template>

vue

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

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

<template>
  <LhTag>Etiqueta 1</LhTag>
  <LhTag>Etiqueta 2</LhTag>
  <LhTag>Etiqueta 3</LhTag>
</template>

Tipo

Etiqueta principalEtiqueta de éxitoEtiqueta de avisoEtiqueta de peligroEtiqueta informativa

vue

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

<template>
  <LhTag type="primary">Etiqueta principal</LhTag>
  <LhTag type="success">Etiqueta de éxito</LhTag>
  <LhTag type="warning">Etiqueta de aviso</LhTag>
  <LhTag type="danger">Etiqueta de peligro</LhTag>
  <LhTag type="info">Etiqueta informativa</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag type="primary">Etiqueta principal</LhTag>
  <LhTag type="success">Etiqueta de éxito</LhTag>
  <LhTag type="warning">Etiqueta de aviso</LhTag>
  <LhTag type="danger">Etiqueta de peligro</LhTag>
  <LhTag type="info">Etiqueta informativa</LhTag>
</template>

Tamaño

Etiqueta pequeñaEtiqueta medianaEtiqueta grande

vue

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

<template>
  <LhTag size="small">Etiqueta pequeña</LhTag>
  <LhTag size="medium">Etiqueta mediana</LhTag>
  <LhTag size="large">Etiqueta grande</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag size="small">Etiqueta pequeña</LhTag>
  <LhTag size="medium">Etiqueta mediana</LhTag>
  <LhTag size="large">Etiqueta grande</LhTag>
</template>

Cerrable

Etiqueta 1Etiqueta 2Etiqueta deshabilitada

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">Etiqueta 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">Etiqueta 2</LhTag>
  <LhTag disabled>Etiqueta deshabilitada</LhTag>
</template>

vue

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

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

Redondeado y borde

Etiqueta redondeadaEtiqueta con bordeEtiqueta redondeada con borde

vue

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

<template>
  <LhTag round>Etiqueta redondeada</LhTag>
  <LhTag hit>Etiqueta con borde</LhTag>
  <LhTag round hit>Etiqueta redondeada con borde</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag round>Etiqueta redondeada</LhTag>
  <LhTag hit>Etiqueta con borde</LhTag>
  <LhTag round hit>Etiqueta redondeada con borde</LhTag>
</template>

Tema personalizado

Aplica un tema de color personalizado a las etiquetas.

Etiqueta verde SonghuaÉxito

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>
  <!-- Tema local: verde Songhua -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">Etiqueta verde Songhua</LhTag>
    <LhTag type="success">Éxito</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>
  <!-- Tema local: verde Songhua -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">Etiqueta verde Songhua</LhTag>
    <LhTag type="success">Éxito</LhTag>
  </LhConfigProvider>
</template>

Para más temas, consulta Personalización de temas.

Internacionalización

El texto de la etiqueta se puede internacionalizar mediante LhConfigProvider junto con el paquete de idioma.

标签

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>
  <!-- Cambio de paquete de idioma mediante 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>
  <!-- Cambio de paquete de idioma mediante 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

Prop	Descripción	Tipo	Predeterminado
type	Tipo de etiqueta	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'default'`
size	Tamaño	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
closable	Si se puede cerrar	`boolean`	`false`
disabled	Si se deshabilita	`boolean`	`false`
round	Si tiene redondeado	`boolean`	`false`
hit	Si tiene borde trazado	`boolean`	`false`
onClose	Manejo personalizado al cerrar	`(e: Event) => void`	—
sx	Props de maquetación rápida (p. ej. `{ mt: 2, w: '50%' }`), se convierten a estilos en línea aplicados al elemento raíz	`LhSxProps`	—

Eventos

Evento	Descripción	Tipo
click	Se dispara al pulsar la etiqueta	`(e: MouseEvent) => void`
close	Se dispara al cerrar la etiqueta	`(e: Event) => void`

Slots

Slot	Descripción
default	Contenido de la etiqueta

Accesibilidad

El botón de cierre es un botón de solo icono; su aria-label procede del paquete de idioma tag.close (en chino, 关闭) y cambia de idioma con el ConfigProvider
El icono dentro del botón de cierre es un <svg> marcado como aria-hidden, para evitar el anuncio duplicado del lector de pantalla
El texto de la etiqueta se puede leer directamente y no necesita un nombre adicional

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/tag/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhTagProps

export interface LhTagProps {
  type?: LhTagType
  size?: LhTagSize
  closable?: boolean
  disabled?: boolean
  round?: boolean
  hit?: boolean
  /** Manejo personalizado al cerrar */
  onClose?: (e: Event) => void
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhTagSize

export type LhTagSize = LhComponentSize

LhTagType _{(de @lh-ui/share/core/tag)}

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

LhComponentSize _{(de @lh-ui/share/core/shared)}

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

Etiqueta ​

Uso básico ​

Tipo ​

Tamaño ​

Cerrable ​

Redondeado y borde ​

Tema personalizado ​

Internacionalización ​

Tag API ​

Props ​

Eventos ​

Slots ​

Accesibilidad ​

Definiciones de tipos ​