Étiquette

LhTag sert à marquer et à catégoriser.

Utilisation de base

Étiquette 1Étiquette 2Étiquette 3

vue

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

<template>
  <LhTag>Étiquette 1</LhTag>
  <LhTag>Étiquette 2</LhTag>
  <LhTag>Étiquette 3</LhTag>
</template>

vue

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

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

<template>
  <LhTag>Étiquette 1</LhTag>
  <LhTag>Étiquette 2</LhTag>
  <LhTag>Étiquette 3</LhTag>
</template>

Type

Étiquette principaleÉtiquette de succèsÉtiquette d'avertissementÉtiquette de dangerÉtiquette d'information

vue

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

<template>
  <LhTag type="primary">Étiquette principale</LhTag>
  <LhTag type="success">Étiquette de succès</LhTag>
  <LhTag type="warning">Étiquette d'avertissement</LhTag>
  <LhTag type="danger">Étiquette de danger</LhTag>
  <LhTag type="info">Étiquette d'information</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag type="primary">Étiquette principale</LhTag>
  <LhTag type="success">Étiquette de succès</LhTag>
  <LhTag type="warning">Étiquette d'avertissement</LhTag>
  <LhTag type="danger">Étiquette de danger</LhTag>
  <LhTag type="info">Étiquette d'information</LhTag>
</template>

Tailles

Petite étiquetteÉtiquette moyenneGrande étiquette

vue

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

<template>
  <LhTag size="small">Petite étiquette</LhTag>
  <LhTag size="medium">Étiquette moyenne</LhTag>
  <LhTag size="large">Grande étiquette</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag size="small">Petite étiquette</LhTag>
  <LhTag size="medium">Étiquette moyenne</LhTag>
  <LhTag size="large">Grande étiquette</LhTag>
</template>

Fermable

Étiquette 1Étiquette 2Étiquette désactivée

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">Étiquette 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">Étiquette 2</LhTag>
  <LhTag disabled>Étiquette désactivée</LhTag>
</template>

vue

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

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

Coins arrondis et contour

Étiquette à coins arrondisÉtiquette contournéeCoins arrondis et contour

vue

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

<template>
  <LhTag round>Étiquette à coins arrondis</LhTag>
  <LhTag hit>Étiquette contournée</LhTag>
  <LhTag round hit>Coins arrondis et contour</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag round>Étiquette à coins arrondis</LhTag>
  <LhTag hit>Étiquette contournée</LhTag>
  <LhTag round hit>Coins arrondis et contour</LhTag>
</template>

Thème personnalisé

Appliquez un thème de couleur personnalisé aux étiquettes.

Étiquette vert pineSuccès

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>
  <!-- Thème local : vert pine -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">Étiquette vert pine</LhTag>
    <LhTag type="success">Succès</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>
  <!-- Thème local : vert pine -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">Étiquette vert pine</LhTag>
    <LhTag type="success">Succès</LhTag>
  </LhConfigProvider>
</template>

Pour plus de thèmes, consultez Personnalisation du thème.

Internationalisation

Le texte des étiquettes peut être internationalisé via LhConfigProvider et les packs de langue.

标签

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>
  <!-- Changement de pack de langue via 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>
  <!-- Changement de pack de langue via 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>

API Tag

Props

Prop	Description	Type	Valeur par défaut
type	Type d'étiquette	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'default'`
size	Taille	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
closable	Fermable ou non	`boolean`	`false`
disabled	Désactivée ou non	`boolean`	`false`
round	Coins arrondis ou non	`boolean`	`false`
hit	Présence d'une bordure de contour ou non	`boolean`	`false`
onClose	Traitement personnalisé lors de la fermeture	`(e: Event) => void`	—
sx	Props de mise en page sx (ex. `{ mt: 2, w: '50%' }`), converties en styles inline appliqués à l'élément racine	`LhSxProps`	—

Events

Événement	Description	Type
click	Déclenché lors du clic sur l'étiquette	`(e: MouseEvent) => void`
close	Déclenché lors de la fermeture de l'étiquette	`(e: Event) => void`

Slots

Slot	Description
default	Contenu de l'étiquette

Accessibilité

Le bouton de fermeture est un bouton à icône seule ; son aria-label provient du pack de langue tag.close (« 关闭 » en chinois), et suit le changement de langue du ConfigProvider
L'icône <svg> à l'intérieur du bouton de fermeture est marquée aria-hidden afin d'éviter une double annonce aux lecteurs d'écran
Le texte de l'étiquette est directement lisible et ne nécessite pas de nommage supplémentaire

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/tag/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhTagProps

export interface LhTagProps {
  type?: LhTagType
  size?: LhTagSize
  closable?: boolean
  disabled?: boolean
  round?: boolean
  hit?: boolean
  /** Traitement personnalisé lors de la fermeture */
  onClose?: (e: Event) => void
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhTagSize

export type LhTagSize = LhComponentSize

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

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

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

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

Étiquette ​

Utilisation de base ​

Type ​

Tailles ​

Fermable ​

Coins arrondis et contour ​

Thème personnalisé ​

Internationalisation ​

API Tag ​

Props ​

Events ​

Slots ​

Accessibilité ​

Définitions de types ​