<nav class="radikalwp-cp-pg"><span>‹<//span><b>۱<//b><a href="#">۲<//a><a href="#">۳<//a><em>…<//em><a href="#">۱۲<//a><a href="#">›<//a><//nav>
.radikalwp-cp-pg { display: inline-flex; align-items: center; gap: 5px; }
.radikalwp-cp-pg a, .radikalwp-cp-pg b, .radikalwp-cp-pg span, .radikalwp-cp-pg em {
min-width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 12.5px;
text-decoration: none;
font-style: normal;
}
.radikalwp-cp-pg a { color: #475569; background: #f1f5f9; transition: all .2s ease; }
.radikalwp-cp-pg a:hover { background: #e2e8f0; color: #0f172a; }
.radikalwp-cp-pg b { color: #fff; background: #4f46e5; font-weight: 700; }
.radikalwp-cp-pg em { color: #cbd5e1; }
.radikalwp-cp-pg span, .radikalwp-cp-pg a { cursor: pointer; font-weight: 700; }
درباره این اسنیپت
صفحهبندی با صفحه فعال پرشده و دکمههای قبلی/بعدی گرد؛ سبک تمیز و استاندارد. هاور لطیف راهنمای کلیک خوبی میدهد. این کامپوننت آماده یکی از اجزای پرکاربرد رابط کاربری است و مستقیم داخل صفحهها قرار میگیرد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
صفحهبندی گرد شیک
این متن پنل اول است؛ محتوای هر تب با انتخاب نشان داده میشود.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!