وسم Tag

يُستخدم LhTag للتمييز والتصنيف.

الاستخدام الأساسي

وسم أولوسم ثانوسم ثالث

vue

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

<template>
  <LhTag>وسم أول</LhTag>
  <LhTag>وسم ثان</LhTag>
  <LhTag>وسم ثالث</LhTag>
</template>

vue

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

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

<template>
  <LhTag>وسم أول</LhTag>
  <LhTag>وسم ثان</LhTag>
  <LhTag>وسم ثالث</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>

قابل للإغلاق

وسم أولوسم ثانوسم معطّل

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">وسم أول</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">وسم ثان</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">وسم أول</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">وسم ثان</LhTag>
  <LhTag disabled>وسم معطّل</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 مع حزمة لغة.

Tag

vue

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

const locale = ref('ar')
</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 ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

export default {
  components: { LhConfigProvider, LhTag, LhButton },
  data() {
    return {
      locale: 'ar',
      ar: ar,
      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 ​

إمكانية الوصول ​

تعريفات الأنواع ​