Поповерлар

Гомуми күзәтү

Поповер плагинын кулланганда белергә кирәк нәрсәләр:

• Поповерлар позиция өчен өченче як китапханәсе Попперга таяналар . Сез bootstrap.js алдыннан popper.min.js кертергә яки поповерлар эшләсен өчен Popper булган bootstrap.bundle.min.js/ кулланырга тиеш!bootstrap.bundle.js
• Поповерлар бәйләнеш буларак кораллар плагинын таләп итәләр.
• Поповерлар башкару сәбәпләре аркасында сайланалар, шуңа күрә сез аларны үзегез башларга тиеш .
• Нуль озынлыгы titleһәм contentкыйммәтләре беркайчан да поповерны күрсәтмәячәк.
• Катлаулырак компонентларда проблемалар китермәс өчен күрсәтегез container: 'body'(безнең кертү төркемнәре, төймә төркемнәре һ.б.).
• Яшерен элементларда поповерлар эшләмәячәк.
• Поповерлар .disabledяки disabledэлементлар төрү элементында башланырга тиеш.
• Берничә сызык белән уралган якорьлардан башлангач, поповерлар якорьларның гомуми киңлеге арасында урнашачак. Бу тәртиптән саклану өчен с-ларда .text-nowrapкулланыгыз .<a>
• Поповерлар тиешле элементлар DOMдан чыгарылганчы яшерелергә тиеш.
• Поповерлар DOM күләгәсендәге элемент ярдәмендә башланырга мөмкин.

Кайбер мисаллар белән поповерларның ничек эшләвен күрү өчен укуны дәвам итегез.

Exampleрнәк: һәркайда поповерларны эшләгез

Биттәге барлык поповерларны башлап җибәрүнең бер ысулы - аларны 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шуңа күрә поповерның HTML шул элемент эчендә күренсен.

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>

Дүрт юнәлеш

Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән. РТЛда Bootstrap кулланганда юнәлешләр чагылдырылган.

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

Сасс

Variзгәрешләр

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

Куллану

JavaScript аша поповерларны рөхсәт итегез:

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-bs-өстәгез data-bs-animation="". Вариантларның мәгълүмат төрен camelCase'тан kebab-case'ка мәгълүмат атрибутлары аша биргәндә үзгәртегез. Мәсәлән, куллану урынына 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()

утильләштерү

Элементның поповерын яшерә һәм юк итә (DOM элементында сакланган мәгълүматны бетерә). Делегацияне кулланган поповерлар ( вариант ярдәмендә ясалган )selector нәсел триггер элементларында аерым юк ителми.

myPopover.dispose()

кушарга

Элементның поповерын күрсәтү мөмкинлеге бирә. Поповерлар килешү буенча кушылган.

myPopover.enable()

сүндер

Элементның поповерын күрсәтү мөмкинлеген бетерә. Поповер яңадан эшләнгән очракта гына күрсәтеләчәк.

myPopover.disable()

күчә

Элементның поповерын күрсәтү яки яшерү мөмкинлеген күчә.

myPopover.toggleEnabled()

яңарту

Элементның поповер позициясен яңарта.

myPopover.update()

getInstance

DOM элементы белән бәйләнгән поповер инстанциясен алырга мөмкинлек бирүче статик ысул

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

getOrCreateInstance

Статик ысул, ул DOM элементы белән бәйләнгән инстанцияне алырга, яисә ул башланмаган очракта яңасын булдырырга мөмкинлек бирә.

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