Поповерс

Преглед

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

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

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

Примери

Омогући искачуће прозоре

Као што је горе поменуто, морате да иницијализујете искачуће елементе пре него што се могу користити. Један од начина да иницијализујете све искачуће прозоре на страници био би да их изаберете према њиховом data-bs-toggleатрибуту, на пример:

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

Демо уживо

Користимо ЈаваСцрипт сличан горенаведеном фрагменту за приказивање следећег искачућег приказа уживо. Наслови се постављају преко 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>

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

Доступне су четири опције: горе, десно, доле и лево. Упутства се пресликавају када користите Боотстрап у РТЛ-у. Подесите 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тако да се ХТМЛ искачућег елемента уместо тога појављује унутар тог елемента. Ово је уобичајено у прилагодљивим табелама, улазним групама и слично.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Друга ситуација у којој ћете желети да поставите експлицитно прилагођено containerјесу искачући прозори унутар модалног дијалога , да бисте били сигурни да је сам искачући прозор додат модалном. Ово је посебно важно за искачуће елементе који садрже интерактивне елементе – модални дијалози ће ухватити фокус, тако да осим ако искачући елемент није подређени елемент модала, корисници неће моћи да фокусирају или активирају ове интерактивне елементе.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Прилагођени поповерс

Можете да прилагодите изглед искачућих прозора користећи ЦСС променљиве . Поставили смо прилагођену класу са data-bs-custom-class="custom-popover"за опсег нашег прилагођеног изгледа и користимо је да заобиђемо неке од локалних ЦСС променљивих.

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

ЦСС

Променљиве

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, поповерс сада користе локалне ЦСС променљиве укључене .popoverза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$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);
  

Сасс варијабле

$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;

Употреба

Омогућите искачуће прозоре преко ЈаваСцрипт-а:

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

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут 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...
})