پاپاورها

بررسی اجمالی

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

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

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

مثال: پاپاورها را در همه جا فعال کنید

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

مثال: با استفاده از containerگزینه

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

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

مثال

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

چهار جهت

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

<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>

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

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

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

var popover = new bootstrap.Popover(document.querySelector('.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>

ساس

متغیرها

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

استفاده

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

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

گزینه ها

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

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

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

مواد و روش ها

نشان می دهد

پاپاور یک عنصر را آشکار می کند. قبل از اینکه پاپاور واقعاً نشان داده شود (یعنی قبل از shown.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود. پاپاورهایی که عنوان و محتوای آنها هر دو با طول صفر است هرگز نمایش داده نمی شوند.

myPopover.show()

پنهان شدن

پاپاور یک عنصر را پنهان می کند. قبل از اینکه پاپاور واقعاً پنهان شود (یعنی قبل از hidden.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود.

myPopover.hide()

تغییر وضعیت

popover یک عنصر را تغییر می دهد. قبل از اینکه پاپاور واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.popoverیا hidden.bs.popoverرویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود.

myPopover.toggle()

در معرض قرار دادن

پاپاور یک عنصر را پنهان و از بین می برد (داده های ذخیره شده در عنصر DOM را حذف می کند). پاپاورهایی که از تفویض استفاده می‌کنند (که با استفاده از selectorگزینه ایجاد می‌شوند ) را نمی‌توان به‌صورت جداگانه در عناصر ماشه‌ای نزول از بین برد.

myPopover.dispose()

فعال کردن

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

myPopover.enable()

غیر فعال کردن

قابلیت نمایش پاپاور یک عنصر را حذف می کند. Popover فقط در صورت فعال شدن مجدد قابل نمایش است.

myPopover.disable()

toggleEnabled

قابلیت نمایش یا پنهان کردن پاپاور یک عنصر را تغییر می‌دهد.

myPopover.toggleEnabled()

به روز رسانی

موقعیت popover یک عنصر را به روز می کند.

myPopover.update()

getInstance

روش ایستا که به شما امکان می دهد نمونه popover مرتبط با یک عنصر DOM را دریافت کنید

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

روش ایستا که به شما امکان می دهد نمونه popover مرتبط با یک عنصر DOM را دریافت کنید یا در صورتی که اولیه نشده بود، یک نمونه جدید ایجاد کنید.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

مناسبت ها

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