پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-tabs-line"><input type="radio" id="radikalwp-tabs-a" name="radikalwp-tabs" checked><label for="radikalwp-tabs-a">همه<//label><input type="radio" id="radikalwp-tabs-b" name="radikalwp-tabs"><label for="radikalwp-tabs-b">اسنیپت<//label><input type="radio" id="radikalwp-tabs-c" name="radikalwp-tabs"><label for="radikalwp-tabs-c">قالب<//label><//div>
.radikalwp-tabs-line {
display: inline-flex;
gap: 6px;
padding: 5px;
background: #f1f5f9;
border-radius: 13px;
}
.radikalwp-tabs-line input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radikalwp-tabs-line label {
position: relative;
padding: 9px 24px 11px;
font-size: 13.5px;
font-weight: 700;
color: #64748b;
border-radius: 9px;
cursor: pointer;
transition: color .25s ease, background .25s ease;
}
.radikalwp-tabs-line label::after {
content: '';
position: absolute;
bottom: 3px;
right: 50%;
width: 0;
height: 3px;
border-radius: 999px;
background: #4f46e5;
transform: translateX(50%);
transition: width .3s ease;
}
.radikalwp-tabs-line input:checked + label {
color: #4f46e5;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.radikalwp-tabs-line input:checked + label::after { width: 46%; }
درباره این اسنیپت
تببار سهگانه با خط فعال زیر هر تب که در حالت انتخاب از مرکز باز میشود. حالت فعال با رادیو واقعی ساخته شده تا بدون جاوااسکریپت کار کند و با فرمها هم سازگار بماند. برای فیلتر سریع فهرستها، هدر بخشها و تبهای موبایل مناسب است. برچسب تبها و تعدادشان با کپی کردن بلوک رادیو قابل افزایش است.
پرسشهای متداول
جفت input رادیو و label جدید اضافه کنید و نام رادیو را یکسان نگه دارید تا گروه انتخاب حفظ شود.
این نسخه ناوبری ظاهری است. برای تعویض محتوا میتوانید سلکتورهای :checked را به پنلهای محتوای خود وصل کنید.
رنگ پسزمینه شبهالمان ::after زیر لیبل فعال را با رنگ برند خود جایگزین کنید. رنگ متن فعال را هم هماهنگ کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!