وسم Tag

وسم خفيف. ألوان دلالية عبر type مع شكلَي round/hit، وإمكانية الإغلاق.

وسم

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>افتراضي</LhTag>
      <LhTag type="primary">رئيسي</LhTag>
      <LhTag type="success">نجاح</LhTag>
      <LhTag type="warning">تحذير</LhTag>
      <LhTag type="danger">خطر</LhTag>
      <LhTag type="info">معلومة</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">صغير</LhTag>
      <LhTag size="medium">الحجم الافتراضي</LhTag>
      <LhTag size="large">كبير</LhTag>
      <LhTag type="primary" round>زوايا دائرية</LhTag>
      <LhTag type="primary" hit>حدود (hit)</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">قابل للإغلاق</LhTag>
      <LhTag v-if="!closed" type="info" round>يُخفى بعد الإغلاق</LhTag>
      <LhTag type="warning" disabled>معطّل</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
type	اللون الدلالي	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	الحجم	'small' \| 'medium' \| 'large'	'medium'
closable	عرض زر الإغلاق (aria-label من حزمة اللغة)	boolean	false
disabled	معطّل (يُحجَب زر الإغلاق)	boolean	false
round / hit	زوايا دائرية / إبراز بالحدود	boolean	false
onClose	استدعاء الإغلاق (يتعايش مع حدث close)	(e: Event) => void	—
sx	اختصار sx للتخطيط	—	—

Events

حدث	الوصف	معاملات الاستدعاء
click	يُطلق عند النقر	(e: MouseEvent)
close	يُطلق عند النقر على زر الإغلاق (يتعايش مع prop الخاص بـ onClose)	(e: Event)