Badge

کامپوننت x-badge به شما این امکان را می‌دهد که به راحتی انواع برچسب‌های رنگی و زیبا را در پروژه خود نمایش دهید؛ چه برای نمایش وضعیت، چه برای شمارنده یا هر کاربرد دیگری. می‌توانید رنگ، اندازه، ظاهر، آیکن و حتی حالت گرد بودن برچسب را به دلخواه خود تنظیم کنید. اگر دوست داشتید، می‌توانید برچسب را به یک لینک قابل کلیک تبدیل کنید یا رنگ کاملاً سفارشی برای آن تعریف کنید.

---

ویژگی‌ها

• انتخاب از بین رنگ‌های متنوع مثل primary، success، danger، info و ... یا حتی تعریف رنگ دلخواه با customColor
• تعیین ظاهر برچسب با حالت‌های مختلف: solid (پررنگ)، light (روشن)، outline (حاشیه‌ای)، transparent (شفاف) و none
• انتخاب اندازه مناسب: خیلی کوچک (xs)، کوچک (sm)، متوسط (md) یا بزرگ (lg)
• افزودن آیکن FontAwesome کنار متن و تعیین اینکه آیکن سمت راست باشد یا چپ (iconPosition)
• نمایش برچسب با گوشه‌های کاملاً گرد (pill) فقط با یک پراپ ساده
• تبدیل برچسب به لینک با تعیین href و انتخاب target دلخواه (مثلاً باز شدن در تب جدید)
• امکان اضافه کردن کلاس CSS و استایل دلخواه برای شخصی‌سازی بیشتر
• نمایش هر متنی که دوست دارید با پراپ value

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
variant	string	"primary"	رنگ اصلی برچسب (مثلاً: primary، success، danger و ...) یا هر رنگ دلخواه با customColor
appearance	string	"solid"	ظاهر برچسب: solid، light، outline، transparent، none
value	string	null	متن یا عددی که داخل برچسب نمایش داده می‌شود
icon	string	null	کلاس آیکن FontAwesome برای نمایش کنار متن
iconPosition	string	"right"	موقعیت آیکن: right (پیش‌فرض) یا left
size	string	"md"	اندازه برچسب: xs، sm، md، lg
pill	boolean	false	اگر می‌خواهید برچسب کاملاً گرد باشد، این پراپ را true بگذارید
href	string	null	اگر مقدار بدهید، برچسب به لینک تبدیل می‌شود
target	string	"_self"	target لینک (_blank، _self، _parent، _top)
customColor	string	null	رنگ سفارشی (فقط hex شش رقمی مانند #FFAA00)
tooltip	string	null	متن راهنما (tooltip) که هنگام هاور نمایش داده می‌شود
label	string	null	متن کوچکی که بالای برچسب (badge) نمایش داده می‌شود (مثلاً برای عنوان کوتاه)
class	string	null	کلاس CSS اضافی برای استایل‌دهی بیشتر
elementStyle	string	null	استایل‌های درون‌خطی CSS برای برچسب

نکات مهم

• مقدار customColor باید فقط یک رنگ hex شش رقمی معتبر باشد (مثلاً #FFAA00).
• مقدار target فقط یکی از این مقادیر باشد: _blank، _self، _parent، _top.
• حداقل یکی از value یا icon باید مقدار داشته باشد؛ در غیر این صورت badge نمایش داده نمی‌شود.

نکات مهم

• اگر از customColor استفاده کنید، badge همیشه به صورت حالت light نمایش داده می‌شود تا کنترل بهتری روی رنگ وجود داشته باشد.
• برای تغییر رنگ سفارشی به صورت داینامیک با جاوااسکریپت، می‌توانید از متد زیر استفاده کنید:

$("#sample-badge").setBadgeColor("#ff0000");

---

مثال‌ها

نمونه ۱: badge بزرگ با آیکن و گوشه‌های گرد

<x-badge value="فعال" icon="fas fa-check" size="lg" :pill="true" variant="info" />