Поповери

Преглед

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

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

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

Примери

Овозможи popovers

Како што споменавме погоре, мора да ги иницијализирате поповерите пред да можат да се користат. Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот 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

Променливи

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, поповерите сега користат локални 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;

Употреба

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

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

Опции

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