پاپاورها

بررسی اجمالی

نکاتی که هنگام استفاده از افزونه popover باید بدانید:

• Popover ها برای موقعیت یابی به کتابخانه شخص ثالث Popper متکی هستند . شما باید popper.min.js را قبل از آن اضافه bootstrap.jsکنید، یا از یکی bootstrap.bundle.min.jsکه حاوی Popper باشد استفاده کنید.
• Popover ها به پلاگین popover به عنوان یک وابستگی نیاز دارند.
• Popover ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
• طول صفر titleو contentمقادیر هرگز پاپاور را نشان نمی دهند.
• container: 'body'برای جلوگیری از بروز مشکلات در مؤلفه‌های پیچیده‌تر (مانند گروه‌های ورودی، گروه‌های دکمه‌ها و غیره) آن را مشخص کنید .
• راه اندازی پاپاور روی عناصر پنهان کار نخواهد کرد.
• پاپاور برای .disabledیا disabledعناصر باید روی یک عنصر لفافی فعال شوند.
• هنگامی که از لنگرهایی که در چندین خط قرار می گیرند، پاپاورها بین عرض کلی لنگرها در مرکز قرار می گیرند. برای جلوگیری از این رفتار از .text-nowrapروی s خود استفاده کنید.<a>
• Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
• پاپاورها را می توان به لطف عنصری در داخل یک DOM سایه فعال کرد.

به خواندن ادامه دهید تا ببینید پاپاورها با چند مثال چگونه کار می کنند.

مثال ها

پاپاورها را فعال کنید

همانطور که در بالا ذکر شد، شما باید پاپاورها را قبل از استفاده از آنها مقداردهی اولیه کنید. یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه این است که آنها را بر اساس ویژگی آنها انتخاب کنید data-bs-toggle، مانند:

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

نسخه ی نمایشی زنده

ما از جاوا اسکریپت مشابه قطعه بالا برای نمایش پاپاور زنده زیر استفاده می کنیم. عناوین از طریق data-bs-titleو محتوای بدنه از طریق تنظیم می شوند data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

چهار جهت

چهار گزینه در دسترس است: بالا، راست، پایین و چپ. هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند. data-bs-placementبرای تغییر جهت تنظیم کنید .

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

سفارشیcontainer

وقتی چند سبک روی یک عنصر والد دارید که با پاپاور تداخل دارد، باید یک سفارشی را مشخص کنید containerتا به جای آن HTML پاپاور در آن عنصر ظاهر شود. این در جداول پاسخگو، گروه های ورودی و موارد مشابه رایج است.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

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

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

پاپاورهای سفارشی

می توانید ظاهر پاپاورها را با استفاده از متغیرهای CSS سفارشی کنید . ما یک کلاس سفارشی با آن تنظیم data-bs-custom-class="custom-popover"می کنیم تا ظاهر سفارشی خود را محدود کنیم و از آن برای نادیده گرفتن برخی از متغیرهای CSS محلی استفاده می کنیم.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

رد کردن با کلیک بعدی

از focusماشه برای رد کردن پاپاورها در کلیک بعدی کاربر بر روی عنصری متفاوت از عنصر تعویض استفاده کنید.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

عناصر غیر فعال

عناصر دارای disabledویژگی تعاملی نیستند، به این معنی که کاربران نمی توانند ماوس را نگه دارند یا روی آنها کلیک کنند تا پاپ اور (یا راهنمای ابزار) راه اندازی شود. به‌عنوان راه‌حل، می‌خواهید پاپ‌اور را از یک لفاف <div>یا <span>با استفاده از صفحه کلید که به‌طور ایده‌آل ساخته شده است، فعال tabindex="0"کنید.

برای راه‌اندازهای پاپ‌اور غیرفعال، ممکن است ترجیح data-bs-trigger="hover focus"دهید که پاپ‌اور به‌عنوان بازخورد بصری فوری برای کاربران شما ظاهر شود زیرا ممکن است انتظار نداشته باشند روی یک عنصر غیرفعال کلیک کنند.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

متغیرها

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل بوت استرپ، پاپاورها اکنون از متغیرهای CSS محلی .popoverبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

متغیرهای Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

استفاده

فعال کردن پاپاورها از طریق جاوا اسکریپت:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

گزینه ها

از آنجایی که گزینه‌ها می‌توانند از طریق ویژگی‌های داده یا جاوا اسکریپت ارسال شوند، می‌توانید یک نام گزینه را data-bs-مانند در ضمیمه کنید data-bs-animation="{value}". هنگام عبور گزینه ها از طریق ویژگی های داده، حتماً نوع حروف نام گزینه را از “ camelCase ” به “ kebab-case ” تغییر دهید. به عنوان مثال، data-bs-custom-class="beautifier"به جای استفاده از data-bs-customClass="beautifier".

از Bootstrap 5.2.0، همه مؤلفه‌ها از یک ویژگی داده رزرو شده تجربیdata-bs-config پشتیبانی می‌کنند که می‌تواند پیکربندی مؤلفه ساده را به عنوان یک رشته JSON در خود جای دهد. هنگامی که یک عنصر دارای data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"ویژگی باشد، مقدار نهایی titleخواهد بود 456و ویژگی های داده جداگانه مقادیر داده شده در را لغو می کنند data-bs-config. علاوه بر این، ویژگی های داده موجود می توانند مقادیر JSON مانند data-bs-delay='{"show":0,"hide":150}'.

استفاده از تابع باpopperConfig

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

مواد و روش ها

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

مناسبت ها

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})