Поповерс

Преглед

Ствари које треба знати када користите додатак за попове:

• Поповерс се ослањају на Поппер библиотеку треће стране за позиционирање. Морате укључити поппер.мин.јс пре боотстрап.јс или користити bootstrap.bundle.min.js/ bootstrap.bundle.jsкоји садржи Поппер да би искачући елементи радили!
• Поповерс захтевају додатак са описом алата као зависност.
• Искачући бројеви су укључени из разлога перформанси, тако да их морате сами иницијализирати .
• Нулта дужина titleи contentвредности никада неће приказати искакање.
• Наведите container: 'body'да бисте избегли проблеме са приказивањем у сложенијим компонентама (као што су наше групе за унос, групе дугмади, итд.).
• Покретање искачућих приказа на скривеним елементима неће радити.
• Искачући прозори за .disabledили disabledелементе морају бити покренути на елементу омотача.
• Када се активирају из сидра која се премотају преко више линија, искачући прикази ће бити центрирани између укупне ширине сидра. Користите .text-nowrapна свом <a>с да бисте избегли ово понашање.
• Поповерс морају бити сакривени пре него што се њихови одговарајући елементи уклоне из ДОМ-а.
• Поповерс се могу покренути захваљујући елементу унутар ДОМ-а у сенци.

Наставите да читате да бисте видели како искачући подаци раде са неким примерима.

Пример: Омогућите искачуће приказе свуда

Један од начина да се иницијализују сви искачући прозори на страници био би да их изаберете према њиховом 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тако да се ХТМЛ искачућег елемента уместо тога појављује унутар тог елемента.

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>

Четири правца

Доступне су четири опције: горе, десно, доле и поравнато лево. Упутства се пресликавају када користите Боотстрап у РТЛ-у.

<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="". Обавезно промените тип случаја назива опције из цамелЦасе у кебаб-цасе када преносите опције преко атрибута података. На пример, уместо коришћења 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()

располагати

Сакрива и уништава искачући прозор елемента (Уклања сачуване податке на ДОМ елементу). Скочни прозори који користе делегирање (који се креирају помоћу опције selector) не могу се појединачно уништити на елементима окидача потомака.

myPopover.dispose()

омогућити

Даје могућност да се искачући део елемента прикаже. Поповерс су подразумевано омогућени.

myPopover.enable()

онемогућити

Уклања могућност да се искачући прозор елемента прикаже. Поповер ће моћи да се прикаже само ако је поново омогућен.

myPopover.disable()

тогглеЕнаблед

Укључује могућност да се искачући прозор елемента прикаже или сакрије.

myPopover.toggleEnabled()

ажурирање

Ажурира позицију искачућег екрана елемента.

myPopover.update()

гетИнстанце

Статичка метода која вам омогућава да добијете искачућу инстанцу повезану са ДОМ елементом

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

гетОрЦреатеИнстанце

Статичка метода која вам омогућава да добијете искачућу инстанцу повезану са ДОМ елементом или креирате нову у случају да није иницијализована

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