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

Popover

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

Lightmode, Darkmode

مشخصات کلی

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

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

منابع

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

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

Popover

رنگ

Hex	Element
#1AAB66	1. Text Color
#1AAB66	2. Text Color
#9E9E9E	3. Container Color
#9E9E9E	4. Container Color
#9E9E9E	5. Container Color
#9E9E9E	6. Text Color

Hex	Element
#212121	1. Text Color
#E6E1E5	2. Text Color
#373737	3. Container Color
#37B87B	4. Container Color
#373737	5. Container Color
#E6E1E5	6. Text Color

چیدمان

حالت‌ها

Popover

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
//top
<button type="button" data-bs-placement="top" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//bottom
<button type="button" data-bs-placement="bottom" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//left
<button type="button" data-bs-placement="left" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//right
<button type="button" data-bs-placement="right" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>


                                                            
.popover-header {
    font-family: 'YekanBakhFaNum';
    background-color: #D7FFEC !important;
    border-radius: 4px !important;
    margin: 8px;
    border: 0 !important;
    font-size: 16px;
    font-weight: 600;
}

.popover-body {
    font-family: 'YekanBakhFaNum';
    font-size: 14px;
    font-weight: 400;
}


                                                            
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Popover

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
//top
<button type="button" data-bs-placement="top" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//bottom
<button type="button" data-bs-placement="bottom" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//left
<button type="button" data-bs-placement="left" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>

//right
<button type="button" data-bs-placement="right" class="sdp-btn sdp-btn-filled sdp-btn-filled-light-primary"
data-bs-toggle="popover" data-bs-title="عنوان پیش فرض پاپ اوور"
data-bs-content="این یک متن پیش فرض برای نمایش پاپ اوور است">top popover</button>


                                                            
.popover-header {
    font-family: 'YekanBakhFaNum';
    background-color: #D7FFEC !important;
    border-radius: 4px !important;
    margin: 8px;
    border: 0 !important;
    font-size: 16px;
    font-weight: 600;
}

.popover-body {
    font-family: 'YekanBakhFaNum';
    font-size: 14px;
    font-weight: 400;
}


                                                            
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

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

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

نکات کلی

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

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

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

نکات کلی