Поповери

Преглед

Работи што треба да ги знаете кога го користите приклучокот за поповер:

• Поповерите се потпираат на библиотеката од трета страна Popper за позиционирање. Мора да вклучите popper.min.js пред bootstrap.js или да користите bootstrap.bundle.min.js/ bootstrap.bundle.jsшто содржи Popper за да може поповерите да функционираат!
• Поповерите бараат додаток за совети за алатки како зависност.
• Поповерите се избираат поради перформанси, па мора сами да ги иницијализирате .
• Нулта должина titleи contentвредности никогаш нема да покажат поповер.
• Наведете container: 'body'за да избегнете рендерирање проблеми во посложени компоненти (како што се нашите влезни групи, групи копчиња итн.).
• Активирањето поповери на скриените елементи нема да работи.
• Поповер за .disabledили disabledелементи мора да се активираат на елементот за обвивка.
• Кога ќе се активираат од сидра што се обвиткуваат преку повеќе линии, поповерите ќе бидат центрирани помеѓу вкупната ширина на сидрата. Користете .text-nowrapго вашиот <a>s за да го избегнете ова однесување.
• Поповерите мора да се сокријат пред нивните соодветни елементи да бидат отстранети од DOM.
• Поповерите може да се активираат благодарение на елемент во сенка DOM.

Продолжете да читате за да видите како функционираат поповерите со некои примери.

Пример: овозможете popovers насекаде

Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот 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);

Употреба

Овозможете popovers преку JavaScript:

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

Опции

Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-bs-, како во data-bs-animation="". Погрижете се да го смените типот на буквата на името на опцијата од camelCase во ќебап-футрола кога ги пренесувате опциите преку атрибути на податоци. На пример, наместо да користите 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()

префрли

Вклучува исклучување на елементот. Се враќа на повикувачот пред да се прикаже или скрие пукачот (т.е. пред да се случи настанот shown.bs.popoverили hidden.bs.popoverнастанот). Ова се смета за „рачно“ активирање на поповер.

myPopover.toggle()

располага

Сокрива и уништува поповер на елементот (Ги отстранува зачуваните податоци на елементот DOM). Поповерите што користат делегирање (кои се креирани со опцијата selector) не можат да се уништат поединечно на елементите на потомок на активирањето.

myPopover.dispose()

овозможи

Дава можност за прикажување на popover на елементот. Поповерите се стандардно овозможени.

myPopover.enable()

оневозможи

Ја отстранува можноста за прикажување на popover на елементот. Поповерот ќе може да се прикаже само ако е повторно овозможен.

myPopover.disable()

вклучи Овозможено

Ја исклучува можноста за прикажување или сокривање на popover на елементот.

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...
})