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

Check

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

Lightmode, Darkmode

مشخصات کلی

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

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

منابع

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

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

Check

رنگ

Hex	Element
#3ECF8A	1. Container color
#0B1C28	2. Text color
#292929	3. Outline color

Hex	Element
#3ECF8A	1. Container color
#0B1C28	2. Text color
#292929	3. Outline color

حالت‌ها

چیدمان

Check

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

                                                        
<div class="form-check">
    <input class="form-check-input sdp-check" type="checkbox" value="" id="sdpCheckLight" checked>
</div>


                                                            
.form-check-input.sdp-check:checked[type=checkbox] {
    background-image: url(../image/tick.svg) !important;
    background-color: #3ECF8A;
    border: 0;
}

.form-check-input.sdp-check:focus {
    border-color: rgba(0, 0, 0, .25);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(254, 254, 254, 0.25);
}

Check (Dark)

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

                                                    
<div class="form-check dark">
<input class="form-check-input sdp-check" type="checkbox" value="" id="sdpCheckDark">
</div>


                                                        
.dark .form-check-input.sdp-check:checked[type=checkbox] {
background-image: url(../image/tick-dark.svg) !important;
background-color: #BCFFDF;
border: 0;
}

.dark .form-check-input.sdp-check:focus {
border-color: rgba(0, 0, 0, .25);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(254, 254, 254, 0.25);
}

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

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

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

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

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