Поповерлар

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

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

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

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

Мисаллар

Поповерларны кушу

Aboveгарыда әйтелгәнчә, сез поповерларны кулланганчы башларга тиеш. Биттәге барлык поповерларны башлап җибәрүнең бер ысулы - аларны 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 кулланганда юнәлешләр чагылдырылган. Theнәлешне 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

Variзгәрешләр

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, поповерлар хәзерге вакытта .popoverкөчәйтелгән реальләштерү өчен җирле CSS үзгәрүләрен кулланалар. 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);
  

Сасс үзгәрүләр

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