Timeline

کامپوننت‌های x-timeline و x-timeline-item برای نمایش تایم‌لاین (Timeline) در صفحات Blade استفاده می‌شوند. این کامپوننت‌ها امکان نمایش رویدادها یا مراحل مختلف به صورت عمودی و قابل اسکرول را با قابلیت شخصی‌سازی کامل فراهم می‌کنند و برای نمایش تاریخچه، روندها، یا مراحل یک فرآیند بسیار مناسب هستند.

---

ویژگی‌ها

• پشتیبانی از چندین آیتم تایم‌لاین در یک کامپوننت
• امکان تعیین شناسه یکتا (id) و کلاس سفارشی (class) برای تایم‌لاین و هر آیتم
• قابلیت اسکرول‌پذیری تایم‌لاین و تعیین حداکثر ارتفاع (maxHeight)
• پشتیبانی از رنگ‌بندی‌های مختلف (variant) و رنگ سفارشی برای هر آیتم
• امکان نمایش بج (badge) با رنگ و اندازه دلخواه برای هر آیتم
• قابلیت شخصی‌سازی عنوان و مقدار هر آیتم و کلاس‌های مربوط به آن‌ها
• کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

---

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

x-timeline

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
id	string	null	شناسه یکتا برای تایم‌لاین
class	string	null	کلاس CSS اضافی برای تایم‌لاین
scrollable	bool	true	فعال‌سازی اسکرول برای تایم‌لاین
maxHeight	int	700	حداکثر ارتفاع تایم‌لاین (در حالت اسکرول) بر حسب پیکسل

x-timeline-item

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
class	string	null	کلاس CSS اضافی برای آیتم
variant	string	primary	رنگ دایره و خط آیتم (primary, success, danger, ... یا سفارشی)
customColor	string	null	رنگ سفارشی (hex یا rgb) برای دایره و خط آیتم
title	string	null	عنوان آیتم
orientation	string	'vertical'	جهت نمایش عنوان و مقدار: 'vertical' یا 'horizontal'
titleClass	string	null	کلاس CSS برای عنوان آیتم
value	string	null	مقدار یا توضیح آیتم
valueClass	string	null	کلاس CSS برای مقدار آیتم
badge	bool	false	نمایش مقدار به صورت بج (badge)
badgeVariant	string	null	رنگ بج (در صورت فعال بودن badge)
badgeSize	string	sm	اندازه بج (sm, md, lg)

---

نکات مهم

• اگر پراپ id تعیین نشود، به صورت تصادفی ساخته می‌شود تا از تداخل جلوگیری شود.
• پراپ customColor را می‌توانید با مقدار hex (مثلاً #ff9800) یا rgb وارد کنید تا رنگ دایره و خط آیتم سفارشی شود.
• اگر پراپ badge فعال باشد، مقدار value به صورت بج نمایش داده می‌شود و می‌توانید رنگ و اندازه بج را تعیین کنید.
• پراپ variant برای رنگ‌بندی پیش‌فرض استفاده می‌شود و در صورت تعیین customColor، رنگ سفارشی جایگزین می‌شود.

---

مثال‌ها

نمونه پایه

<x-timeline>
    <x-timeline-item title="وضعیت" :badge="true" variant="primary" value="تایید شده" customColor="#ff0000">
        <x-data-display cols="1" bordered="items" alignValues="true" labelWidth="120">
            <x-data-item icon="fa-regular fa-user" label="نام کاربر" value="علی محمودی" suffix="2" />

            <x-data-item icon="fa-regular fa-user-tag" label="نام کاربری" value="ali.mahmoodi" />

            <x-data-item
                icon="fa-solid fa-calendar"
                label="تاریخ ثبت نام"
                value="1403/10/11 , 13:38:16"
                dir="ltr"
                suffix="(از ساعت ۱۳:۳۸:۱۶)"
            />

            <x-data-item
                icon="fa-solid fa-comment"
                label="توضیحات"
                value="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم"
            />
        </x-data-display>
    </x-timeline-item>

    <x-timeline-item title="وضعیت" badge="true" badgeVariant="light-warning" variant="warning" value="در حال بررسی">
        <x-data-display cols="1" bordered="items">
            <x-data-item label="نام کاربر" value="علی محمودی" />

            <x-data-item label="نام کاربری" value="ali.mahmoodi" />

            <x-data-item label="تاریخ ثبت نام" value="۱۴۰۲/۰۱/۱۵" />

            <x-data-item label="توضیحات" value="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" />
        </x-data-display>
    </x-timeline-item>

    <x-timeline-item title="وضعیت" badge="true" badgeVariant="danger" variant="danger" value="تایید نشده">
        <x-data-display cols="1" bordered="items">
            <x-data-item label="نام کاربر" value="علی محمودی" />

            <x-data-item label="نام کاربری" value="ali.mahmoodi" />

            <x-data-item label="تاریخ ثبت نام" value="۱۴۰۲/۰۱/۱۵" />

            <x-data-item label="توضیحات" value="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم" />
        </x-data-display>
    </x-timeline-item>
</x-timeline>