شارة Badge

علامة عددية أو حالاتية في زاوية أيقونة أو زر. تدعم ألوان الأنواع، اقتطاع max، النقطة الحمراء، إظهار/إخفاء القيمة الصفرية، وإزاحة الموضع.

شارة

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>رسائل غير مقروءة</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>اقتطاع عند تجاوز max</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>وضع النقطة الحمراء</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>القيمة الصفرية مخفية افتراضيًا</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>حجم small</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset لضبط الموضع / hidden للإخفاء / content لنص مخصص</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="ساخن" type="danger" :offset="[6, 4]">
        <LhButton>إزاحة offset</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>مفتاح hidden</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? 'إظهار الشارة' : 'إخفاء الشارة' }}</LhButton>
    </div>
  </div>
</template>

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

Props

خاصية	الوصف	النوع	الافتراضي
type	لون النوع	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	قيمة الشارة (تُقتطع إلى max+ عند تجاوزها max)	string \| number	—
size	الحجم	'small' \| 'default' \| 'large'	'default'
max	الحد الأعلى للقيمة	number	—
isDot	وضع النقطة الحمراء (يتجاهل value)	boolean	false
hidden	إخفاء الشارة	boolean	false
offset	الإزاحة عن الموضع الافتراضي [x, y]	[number, number]	—
showZero	هل تُعرض الشارة عندما تكون value تساوي 0	boolean	false
content	نص مخصص (يلغي value)	string	—
sx	خصائص التخطيط السريع sx	—	—

Slots

الفتحة الافتراضية: العنصر المضيف الذي تُركَّب عليه الشارة.