Progress Bar

کامپوننت‌های x-progress-bar و x-progress-bar.item برای نمایش نوار پیشرفت (Progress Bar) در صفحات Blade استفاده می‌شوند. این کامپوننت‌ها امکان نمایش یک یا چند نوار پیشرفت با قابلیت شخصی‌سازی کامل را فراهم می‌کنند و برای نمایش وضعیت پیشرفت عملیات، بارگذاری، درصد انجام کار و ... مناسب هستند.

ویژگی‌ها

پشتیبانی از چندین آیتم نوار پیشرفت در یک ProgressBar
امکان تعیین شناسه یکتا (id) و کلاس سفارشی (class) برای هر ProgressBar و آیتم
قابلیت نمایش یا عدم نمایش برچسب درصد یا عنوان روی نوار پیشرفت
پشتیبانی از رنگ‌بندی‌های مختلف (variant)، رنگ پس‌زمینه و رنگ متن سفارشی
پشتیبانی از حالت راه‌راه (striped)، انیمیشن (animated) و گوشه‌های گرد (rounded)
امکان افزودن بج (badge) با رنگ‌بندی دلخواه به هر آیتم
قابلیت افزودن Tooltip به هر آیتم
کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

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

x-progress-bar

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`null`	شناسه یکتا برای ProgressBar
`class`	`string`	`null`	کلاس CSS اضافی برای ProgressBar
`height`	`string`	`null`	ارتفاع سفارشی برای ProgressBar (مثلاً `24px` یا `1.5rem`)
`label`	`string`	`null`	عنوان کلی برای ProgressBar
`labelClass`	`string`	`null`	کلاس CSS برای عنوان کلی
`totalProgress`	`string`	`null`	متن یا مقدار کلی پیشرفت (نمایش در انتها)
`totalProgressClass`	`string`	`null`	کلاس CSS برای نمایش مقدار کلی پیشرفت

x-progress-bar.item

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`null`	شناسه یکتا برای آیتم
`class`	`string`	`null`	کلاس CSS اضافی برای آیتم
`label`	`string`	`null`	عنوان یا برچسب آیتم
`labelClass`	`string`	`null`	کلاس CSS برای برچسب
`percentage`	`float`	`0`	درصد پیشرفت (بین 0 تا 100)
`showLabel`	`bool`	`true`	نمایش یا عدم نمایش برچسب درصد یا عنوان
`tooltip`	`string`	`null`	متن Tooltip برای آیتم
`variant`	`string`	`null`	رنگ نوار پیشرفت (primary, success, danger, ... یا سفارشی)
`striped`	`bool`	`false`	فعال‌سازی حالت راه‌راه
`animated`	`bool`	`false`	فعال‌سازی انیمیشن
`rounded`	`bool`	`true`	فعال‌سازی گوشه‌های گرد
`badgeTitle`	`string`	`null`	مقدار بج (مثلاً تعداد یا وضعیت)
`badgeVariant`	`string`	`null`	رنگ بج
`backgroundColor`	`string`	`null`	رنگ پس‌زمینه سفارشی
`textColor`	`string`	`null`	رنگ متن سفارشی

نکات مهم

مقدار id در هر دو کامپوننت در صورت عدم تعیین، می‌تواند به صورت تصادفی ساخته شود تا از تداخل جلوگیری شود.
پراپ percentage باید عددی بین 0 تا 100 باشد.

مثال‌ها

نمونه پایه

<x-progress-bar class="mb-4 mt-10">
    <x-progress-bar-item
        variant="info"
        label="35%"
        percentage="35"
        labelClass="bg-white text-gray-700 rounded-4 px-2 fs-11 py-auto ms-2"
        :rounded="false"
        badgeTitle="تست"
        badgeVariant="info"
    />

    <x-progress-bar-item
        variant="success"
        label="30%"
        percentage="30"
        labelClass="bg-white text-gray-700 rounded-4 px-2 fs-11 py-auto ms-3"
        badgeTitle="تست 2"
        badgeVariant="success"
    />
</x-progress-bar>

ویژگی‌ها​

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

x-progress-bar​

x-progress-bar.item​

مثال‌ها​

نمونه پایه​