Textfields

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

Outline Textfield

مشخصات کلی

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

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

منابع

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

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

رنگ

Hex	Element
#7B7B7B	1. Container Outliner
#7B7B7B	2. Label Text
#7B7B7B	3. Supporting Text
#1AAB66	4. Cotainer Outline
#3F3939	5. Supporting Text
#1AAB66	6. Label Text
#212121	7. Input Text

Hex	Element
#BDBDBD	1. Container Outliner
#E1E7E4	2. Label Text
#B2BAB6	3. Supporting Text
#BCFFDF	4. Cotainer Outline
#B2BAB6	5. Supporting Text
#9B9B9B	6. Label Text
#D9E0DD	7. Input Text

حالت‌ها

چیدمان

پیاده‌سازی کامپوننت‌های Textfield در حالت‌های Error, Active و Disabled

متن راهنمای پیش‌فرض عنوان

//Active
<div class="form-floating">
    <input type="text"
        class="form-control sdp-input-floating sdp-input-floating-primary correct"
        id="floatingInput1" >
    <span class="sdp-input-support-text">متن راهنمای پیش‌فرض</span>
    <label for="floatingInput1">
        <span>عنوان</span>
    </label>
</div>



//Error
<div class="form-floating">
    <input type="text"
        class="form-control sdp-input-floating sdp-input-floating-primary incorrect"
        id="floatingInput2" >
    <span class="sdp-input-support-text">متن راهنمای پیش‌فرض</span>
    <label for="floatingInput2">
        <span>عنوان</span>
    </label>
</div>



//Disabled
<div class="form-floating">
    <input type="text"
        class="form-control sdp-input-floating sdp-input-floating-primary" disabled
        id="floatingInput3" >
    <span class="sdp-input-support-text">متن راهنمای پیش‌فرض</span>
    <label for="floatingInput3">
        <span>عنوان</span>
    </label>
</div>

متن راهنمای پیش‌فرض عنوان

input.sdp-input-floating {
    padding: 10px 16px !important;
    margin: 0;
    height:3.5rem !important;
}

.sdp-input-floating:focus {
    color: #212529;
    background-color: #fff;
    box-shadow: 0 0 0 0 !important;
}

.sdp-input-floating:not(:placeholder-shown) {
    color: #525252;
    background-color: #ffffff;
    box-shadow: 0 0 0 0 !important;
}

.form-floating>.form-control:focus~label {
    transform: translateY(-1.8rem);
    opacity: 1;
}

.form-floating>.form-control:not(:placeholder-shown)~label {
    transform: translateY(-1.8rem);
    opacity: 1;
}

.form-floating>.form-control:focus~label>span {
    background-color: #FFFFFF;
    color: #1AAB66;
}

.form-floating>.form-control~label>span {
    background-color: #FFFFFF;
    padding: 0 4px;
}

.sdp-input-support-text {
    color: #3F3939;
    font-size: 12px;
    font-weight: 400;
    margin-right: 16px;
}

/* sdp floating input primary */
.sdp-input-floating-primary:focus {
    border-color: #1AAB66;
    outline: 1px solid #1AAB66;
}

.form-floating>.form-control.sdp-input-floating-primary:focus~label>span {
    background-color: #FFFFFF;
    color: #1AAB66;
}

.sdp-input-floating-primary.correct:focus+.sdp-input-support-text {
    color: #1AAB66 !important;
}



/* sdp floating input primary  (error) */
.sdp-input-floating-primary.incorrect:focus {
    border-color: #990800;
    outline: 1px solid #990800;
}

.form-floating>.form-control.sdp-input-floating-primary.incorrect:focus~label>span {
    background-color: #FFFFFF;
    color: #990800;
}

.sdp-input-floating-primary.incorrect:focus+.sdp-input-support-text {
    color: #990800 !important;
}


.form-floating>.form-control.sdp-input-floating-primary.incorrect:focus~label::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 45px;
    bottom: 0;
    width: 25px;
    background: url(../image/input-error.svg);
    background-repeat: no-repeat;

}


/* sdp floating input primary  (disbaled) */
.sdp-input-floating-primary[disabled] {
    border-color: #B8B8B8;
    color: #B8B8B8;
    outline: 1px solid #B8B8B8;
    background-color: #FFFFFF;
}

.sdp-input-floating-primary[disabled]+.sdp-input-support-text {
    color: #B8B8B8 !important;
}

.form-floating>.form-control.sdp-input-floating-primary[disabled]~label>span {
    background-color: #FFFFFF;
    color: #B8B8B8 !important;
}

فیلدهای اجباری

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

خطاها

هر نوع خطای ناشی از ورود اطلاعات غلط در فیلدها، باید به عنوان متن کمکی و در پایین فیلد نوشته شود.
متن خطا باید کوتاه، واضح و در یک خط باشد.
رنگ فیلد در حالت خطا، باید به رنگ قرمز تغییر کند.

سایر نکات

متن لیبل هر فیلد باید کوتاه، واضح و یک خطی باشد.
با استفاده از متن‌های کمکی در پایین فیلدها و مشخص کردن فرمت‌های ورودی، می‌توانید کاربران را برای پر کردن فیلدها راهنمایی کنید.
بهتر است طول هر فیلد با توجه به طول اطلاعات ورودی آن تنظیم شود.. برای مثال، طول فیلد نام با فیلد آدرس متفاوت باشد.
لیبل هر فیلد، قبل از دریافت ورودی در داخل فیلد و پس از تایپ کاربر، در بالای فیلد قرار می‌گیرد.