وسم Tag

وسوم تُستخدم للتمييز والاختيار.

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

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

وسم افتراضيوسم أساسيوسم نجاحوسم دائريوسم محدّدرسم الحبرالنمط الصينيمكتبة المكوّنات

import { useState } from 'react'
import { LhTag } from '@lh-ui/react'

export default function Demo() {
  const [tags, setTags] = useState(['رسم الحبر', 'النمط الصيني', 'مكتبة المكوّنات'])

  const handleClose = (tag: string) => {
    setTags((prev) => prev.filter((item) => item !== tag))
  }

  return (
    <>
      <LhTag>وسم افتراضي</LhTag>
      <LhTag type="primary">وسم رئيسي</LhTag>
      <LhTag type="success">وسم نجاح</LhTag>
      <LhTag type="warning" round>وسم دائري</LhTag>
      <LhTag type="danger" hit>وسم بحدود</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Tag Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
type	النوع	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	الحجم	'large' | 'middle' | 'small'	—	يُكتسَب من ConfigProvider
closable	قابل للإغلاق	boolean	—	false
disabled	معطّل (لا يستجيب للنقر أو الإغلاق)	boolean	—	false
round	زوايا دائرية	boolean	—	false
hit	شكل الحدود	boolean	—	false
sx	خصائص تخطيط سريعة	SxProps	—	—

Tag أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onClick	يُطلَق عند النقر (عند تمرير onClick دون تعطيل، يترقَّى المكوّن إلى role="button")	(event: MouseEvent) => void	@click
onClose	النقر على زر الإغلاق	(event: MouseEvent) => void	@close

تفاعل لوحة المفاتيح

الوسم القابل للنقر يُعرَض كـ role="button" ويستجيب لـ Enter / Space، طالع إمكانية الوصول.

الإزالة عند الإغلاق (تحسين React)

بعد النقر على زر الإغلاق يُزال Tag فورًا من DOM، ثم يُطلَق onClose. أما @close في lh-ui-plus فيطلق الحدث فقط وتتم إزالة العقدة عبر v-if خارجيًا؛ وليس في React توجيهات، ولو تُركت إدارة الإزالة للحالة الخارجية في سيناريوهات العرض البحتة لكان العبء ثقيلًا، لذلك تتحكم هذه المكتبة في حالة الإزالة داخليًا. وإن أردت تحكُّمًا كاملًا بالظهور والإخفاء، فاكتفِ بالتغليف بالعرض الشرطي.

الأنماط

import '@lh-ui/react/style/tag'