Попови

Преглед

Неща, които трябва да знаете, когато използвате плъгина popover:

• Popovers разчитат на библиотеката на трета страна Popper за позициониране. Трябва да включите popper.min.js преди bootstrap.js или да използвате bootstrap.bundle.min.js/ bootstrap.bundle.js, който съдържа Popper, за да работят popovers!
• Popovers изискват приставката за подсказки като зависимост.
• Popovers са включени поради причини, свързани с производителността, така че трябва да ги инициализирате сами .
• Нулевата дължина titleи contentстойностите никога няма да показват изскачане.
• Посочете container: 'body', за да избегнете проблеми с рендирането в по-сложни компоненти (като нашите входни групи, групи бутони и т.н.).
• Задействането на изскачащи съобщения върху скрити елементи няма да работи.
• Изскачащи съобщения за .disabledили disabledелементи трябва да се задействат върху обвиващ елемент.
• Когато се задействат от анкери, които преминават през множество линии, изскачащите екрани ще бъдат центрирани между общата ширина на котвите. Използвайте .text-nowrapна вашия <a>s, за да избегнете това поведение.
• Popovers трябва да бъдат скрити, преди съответните им елементи да бъдат премахнати от DOM.
• Popovers могат да бъдат задействани благодарение на елемент в 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);

Използване

Активиране на изскачащи прозорци чрез JavaScript:

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-bs-, както в data-bs-animation="". Уверете се, че сте променили типа case на името на опцията от 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настъпи събитието). Това се счита за „ръчно“ задействане на popover. Изскачащи съобщения, чието заглавие и съдържание са с нулева дължина, никога не се показват.

myPopover.show()

Крия

Скрива изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащото съобщение да е действително скрито (т.е. преди да hidden.bs.popoverсе случи събитието). Това се счита за „ръчно“ задействане на popover.

myPopover.hide()

превключвам

Превключва изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан или скрит (т.е. преди събитието shown.bs.popoverили да hidden.bs.popoverсе появи). Това се счита за „ръчно“ задействане на popover.

myPopover.toggle()

изхвърлям

Скрива и унищожава popover на елемент (Премахва съхранените данни на DOM елемента). Popovers, които използват делегиране (които се създават с помощта на selectorопцията ), не могат да бъдат унищожени поотделно на елементи на задействане на потомък.

myPopover.dispose()

активирайте

Дава възможност за показване на popover на елемент. Изскачащите екрани са активирани по подразбиране.

myPopover.enable()

деактивирайте

Премахва възможността за показване на изскачащ прозорец на елемент. Изскачащият прозорец ще може да се показва само ако бъде активиран отново.

myPopover.disable()

toggleEnabled

Превключва възможността изскачащият прозорец на елемент да бъде показан или скрит.

myPopover.toggleEnabled()

актуализация

Актуализира позицията на изскачащия прозорец на елемент.

myPopover.update()

getInstance

Статичен метод, който ви позволява да получите изскачащия екземпляр, свързан с DOM елемент

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

getOrCreateInstance

Статичен метод, който ви позволява да получите изскачащия екземпляр, свързан с 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...
})