<div class="radikalwp-cb-stepper"><button type="button" class="radikalwp-cb-step-btn">−<//button><span class="radikalwp-cb-step-num">۲<//span><button type="button" class="radikalwp-cb-step-btn">+<//button><//div>
.radikalwp-cb-stepper {
display: inline-flex;
align-items: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
font-family: inherit;
}
.radikalwp-cb-step-btn {
width: 42px;
height: 42px;
font-size: 19px;
color: #475569;
background: #f8fafc;
border: none;
cursor: pointer;
transition: all .2s ease;
}
.radikalwp-cb-step-btn:hover { background: #eef2ff; color: #4f46e5; }
.radikalwp-cb-step-num {
width: 52px;
text-align: center;
font-size: 16px;
font-weight: 800;
color: #1e293b;
border-right: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
line-height: 42px;
}
درباره این اسنیپت
کنترل شمارنده با دکمههای کم و زیاد و عدد وسط؛ برای انتخاب تعداد مجوز و موجودی انبار. این کنترل انتخاب، جایگزین زیبای چکباکس پیشفرض مرورگر است و بدون جاوااسکریپت کار میکند. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار میکند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دستنخورده میماند.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!