Папаўеры

Агляд

Што трэба ведаць пры выкарыстанні плагіна Popover:

• Popovers абапіраюцца на староннюю бібліятэку Popper для пазіцыянавання. Вы павінны ўключыць popper.min.js перад bootstrap.jsабо выкарыстоўваць той bootstrap.bundle.min.js, які змяшчае Popper.
• Popover патрабуе ўбудовы popover як залежнасць.
• Усплывальныя паказанні з'яўляюцца выбарнымі з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
• Нулявая даўжыня titleі contentзначэнні ніколі не пакажуць усплывальнае значэнне.
• Укажыце container: 'body', каб пазбегнуць праблем з візуалізацыяй больш складаных кампанентаў (напрыклад, нашых груп уводу, груп кнопак і г.д.).
• Запуск усплываючых вокнаў на схаваных элементах не будзе працаваць.
• Усплывальныя вокны для элементаў .disabledабо disabledпавінны запускацца на элеменце-абгортцы.
• Пры запуску з прывязак, якія пераходзяць на некалькі ліній, усплывальныя вокны будуць размяшчацца па цэнтры агульнай шырыні прывязак. Выкарыстоўвайце .text-nowrapна вашым <a>s, каб пазбегнуць такіх паводзін.
• Усплывальныя вокны павінны быць схаваныя, перш чым адпаведныя элементы будуць выдалены з DOM.
• Усплывальныя паказы могуць быць выкліканыя дзякуючы элементу ўнутры ценявога DOM.

Працягвайце чытаць, каб даведацца, як працуюць усплывальныя вобразы з некаторымі прыкладамі.

Прыклады

Уключыць усплывальныя вокны

Як згадвалася вышэй, вы павінны ініцыялізаваць усплывальныя вобразы, перш чым іх можна будзе выкарыстоўваць. Адзін са спосабаў ініцыялізаваць усе ўсплывальныя вокны на старонцы - выбраць іх па data-bs-toggleатрыбутах, напрыклад:

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

Жывая дэманстрацыя

Мы выкарыстоўваем JavaScript, падобны да фрагмента вышэй, каб візуалізаваць наступнае жывое ўсплывальнае акно. Загалоўкі задаюцца праз 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

Пераменныя

Як частка падыходу Bootstrap, які развіваецца да зменных 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;

Выкарыстанне

Уключыць усплывальныя вокны праз JavaScript:

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

Параметры

Паколькі параметры можна перадаць праз атрыбуты даных або JavaScript, вы можаце дадаць імя параметра да 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...
})