<div class="radikalwp-cp-tabs"><input type="radio" name="radikalwp-tb" id="tb1" checked /><label for="tb1">توضیحات<//label><input type="radio" name="radikalwp-tb" id="tb2" /><label for="tb2">مشخصات<//label><input type="radio" name="radikalwp-tb" id="tb3" /><label for="tb3">نظرات<//label><div class="radikalwp-cp-tabs-p"><p>این متن پنل اول است؛ محتوای هر تب با انتخاب نشان داده میشود.<//p><//div><//div>
.radikalwp-cp-tabs input { display: none; }
.radikalwp-cp-tabs { width: 320px; }
.radikalwp-cp-tabs label {
display: inline-block;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
color: #64748b;
cursor: pointer;
border-bottom: 2.5px solid transparent;
transition: all .22s ease;
}
.radikalwp-cp-tabs input:checked + label { color: #4f46e5; border-bottom-color: #4f46e5; }
.radikalwp-cp-tabs-p {
margin-top: 12px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 13px;
}
.radikalwp-cp-tabs-p p { margin: 0; font-size: 12.5px; line-height: 2.1; color: #475569; }
درباره این اسنیپت
سه تب که با رادیو مخفی جابهجا میشوند؛ بدون JS، بدون کتابخانه. برای بخشهای محتوایی سبک مثل مشخصات محصول و نظرات کاملاً کافی است. این کامپوننت آماده یکی از اجزای پرکاربرد رابط کاربری است و مستقیم داخل صفحهها قرار میگیرد. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
چطور کدها را استفاده کنم؟
کد را کپی کنید و در فایل CSS یا بلوک HTML المنتور بچسبانید؛ پیشنمایش زنده همان خروجی نهایی است.
روی قالبهای من کار میکند؟
بله، همه اسنیپتها با HTML و CSS خالص نوشته شدهاند و مستقل از قالب هستند.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!