<div class="radikalwp-timeline"><div class="radikalwp-tl-item"><span class="radikalwp-tl-dot radikalwp-tl-g"><//span><div><strong>سفارش ثبت شد<//strong><span>۱۴۰۳/۰۷/۰۱ — ۱۰:۳۰<//span><//div><//div><div class="radikalwp-tl-item"><span class="radikalwp-tl-dot radikalwp-tl-y"><//span><div><strong>در حال پردازش<//strong><span>۱۴۰۳/۰۷/۰۲ — ۰۹:۱۵<//span><//div><//div><div class="radikalwp-tl-item"><span class="radikalwp-tl-dot radikalwp-tl-b"><//span><div><strong>ارسال شد<//strong><span>۱۴۰۳/۰۷/۰۳ — ۱۶:۴۰<//span><//div><//div><//div>
.radikalwp-timeline {
position: relative;
width: 280px;
padding-right: 20px;
font-family: inherit;
}
.radikalwp-timeline::before {
content: '';
position: absolute;
top: 6px;
bottom: 6px;
right: 5px;
width: 2px;
background: #e2e8f0;
}
.radikalwp-tl-item { position: relative; padding: 0 0 20px 0; }
.radikalwp-tl-item:last-child { padding-bottom: 0; }
.radikalwp-tl-dot {
position: absolute;
top: 3px;
right: -21px;
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px #e2e8f0;
}
.radikalwp-tl-g { background: #22c55e; }
.radikalwp-tl-y { background: #f59e0b; }
.radikalwp-tl-b { background: #3b82f6; }
.radikalwp-tl-item strong { display: block; font-size: 13.5px; color: #1e293b; margin-bottom: 2px; }
.radikalwp-tl-item span { font-size: 11.5px; color: #94a3b8; }
درباره این اسنیپت
خط زمانی رویدادها با نقطههای رنگی و تاریخ؛ برای تاریخچه سفارش و فعالیت کاربر. این کامپوننت آماده یکی از اجزای پرکاربرد رابط کاربری است و مستقیم داخل صفحهها قرار میگیرد. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!