Tab`s | سیستم طراحی سپانو

Tabs

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

Lightmode, Darkmode

مشخصات کلی

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

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

منابع

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

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

Tabs

رنگ

Hex	Element
#1AAB66	1. Text Color
#1AAB66	2. Outline Color
#9E9E9E	3. Text Color
#9E9E9E	4. Outline Color

Hex	Element
#BCFFDF	1. Text Color
#BCFFDF	2. Outline Color
#E6E1E5	3. Text Color
#E6E1E5	4. Outline Color

چیدمان

Tabs

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

...

                                                        
<nav>
    <div class="nav nav-tabs sdp-nav-tabs justify-content-around" id="nav-tab" role="tablist">
      <button class="nav-link sdp-nav-link-primary active" id="sdp-nav-light-one-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-one" type="button" role="tab" aria-controls="sdp-nav-light-one" aria-selected="true">آیتم یک</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-two-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-two" type="button" role="tab" aria-controls="sdp-nav-light-two" aria-selected="false">آیتم دو</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-three-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-three" type="button" role="tab" aria-controls="sdp-nav-light-three" aria-selected="false">آیتم سه</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-four-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-four" type="button" role="tab" aria-controls="sdp-nav-light-four" aria-selected="false">آیتم چهار</button>
    </div>
  </nav>
  <div class="tab-content sdp-tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="sdp-nav-light-one" role="tabpanel" aria-labelledby="sdp-nav-light-one-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-two" role="tabpanel" aria-labelledby="sdp-nav-light-two-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-three" role="tabpanel" aria-labelledby="sdp-nav-light-three-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-four" role="tabpanel" aria-labelledby="sdp-nav-light-four-tab" tabindex="0">...</div>
  </div>

...


                                                            
.sdp-nav-link-primary {
    border: 0 !important;
    color: #9E9E9E !important;
}
  
.sdp-nav-link-primary.active {
    color: #1AAB66 !important;
    border-bottom: 2px solid #1AAB66 !important;
}

Tabs (Dark)

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

...

                                                        
<div class="dark">
<nav>
    <div class="nav nav-tabs sdp-nav-tabs justify-content-around" id="nav-tab" role="tablist">
      <button class="nav-link sdp-nav-link-primary active" id="sdp-nav-light-one-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-one" type="button" role="tab" aria-controls="sdp-nav-light-one" aria-selected="true">آیتم یک</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-two-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-two" type="button" role="tab" aria-controls="sdp-nav-light-two" aria-selected="false">آیتم دو</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-three-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-three" type="button" role="tab" aria-controls="sdp-nav-light-three" aria-selected="false">آیتم سه</button>
      <button class="nav-link sdp-nav-link-primary" id="sdp-nav-light-four-tab" data-bs-toggle="tab" data-bs-target="#sdp-nav-light-four" type="button" role="tab" aria-controls="sdp-nav-light-four" aria-selected="false">آیتم چهار</button>
    </div>
  </nav>
  <div class="tab-content sdp-tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="sdp-nav-light-one" role="tabpanel" aria-labelledby="sdp-nav-light-one-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-two" role="tabpanel" aria-labelledby="sdp-nav-light-two-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-three" role="tabpanel" aria-labelledby="sdp-nav-light-three-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="sdp-nav-light-four" role="tabpanel" aria-labelledby="sdp-nav-light-four-tab" tabindex="0">...</div>
  </div>
  <div/>

...


                                                            
.dark .sdp-nav-link-primary {
    border-right: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid white !important;
    color: #E6E1E5 !important;
    background-color: #1F1F1F !important;
}
  
.dark .sdp-nav-link-primary.active {
    color: #BCFFDF !important;
    border-bottom: 2px solid #BCFFDF !important;
}

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

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

نکات کلی

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

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

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

نکات کلی