Попови

Преглед

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

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