Radio Button | سیستم طراحی سپانو

Radio Button

در سیستم طراحی سپانو دیتا انواع Radio Buttonها عبارتند از :

Lightmode, Darkmode

مشخصات کلی

تمامی Radio Buttonها برای دو حالت تاریک و روشن صفحه طراحی شده‌اند.

استفاده از هر نوع از Radio Buttonها بنا به اهمیت آن‌ها است.

منابع

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

Radio Button

رنگ

Hex	Element
#3ECF8A	1. Component color
#9B9B9B	2. Component color

Hex	Element
#3ECF8A	1. Component color
#656565	2. Component color

حالت‌ها

چیدمان

Radio Button

پیاده سازی کامپوننت Radio Button در حالت Light

گزینه اول

گزینه دوم

                                                        
<input class="sdp-radiobutton" type="radio" name="sdp-radiobutton">

گزینه اول

گزینه دوم


                                                            
input.sdp-radiobutton[type="radio"]:checked{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    background: #3ECF8A;
    border: 2px solid rgb(255, 255, 255);
    outline: 2px solid #3ECF8A;
    padding: 5px;
    margin: 5px;
}

input.sdp-radiobutton[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    background: #ffffff;
    outline: 2px solid #9B9B9B;
    padding: 7px;
    margin: 5px;
}

Radio Button (Dark)

پیاده سازی کامپوننت Radio Button در حالت Dark

گزینه اول

گزینه دوم

                                                        
<input class="sdp-radiobutton" type="radio" name="sdp-radiobutton">

گزینه اول

گزینه دوم


                                                            
input.sdp-radiobutton[type="radio"]:checked{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    background: #3ECF8A;
    border: 2px solid rgb(255, 255, 255);
    outline: 2px solid #3ECF8A;
    padding: 5px;
    margin: 5px;
}

input.sdp-radiobutton[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    background: #ffffff;
    outline: 2px solid #9B9B9B;
    padding: 7px;
    margin: 5px;
}

موارد استفاده

کامپوننت Radio Button هنگامی استفاده می‌شود که کاربر باید یک مورد از لیست را انتخاب کند.
گزینه‌های کامپوننت Radio Button می‌توانند هم به صورت افقی و هم به صورت عمودی چیده شوند.

این کامپوننت برخلاف کامپوننت Check، به صورت “تک انتخابی” است و نمی‌توان چند گزینه را در آن به صورت همزمان انتخاب کرد.

سیستم طراحی شرکت سپانو دیتا پارس

موارد استفاده