Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Поповерҳо

Ҳуҷҷатҳо ва мисолҳо барои илова кардани popovers Bootstrap, ба монанди онҳое, ки дар iOS мавҷуданд, ба ҳама гуна унсури сайти шумо.

Барраси

Чизҳоро ҳангоми истифодаи плагини popover донистан лозим аст:

  • Поповҳо барои ҷойгиркунӣ ба китобхонаи сеюми Popper такя мекунанд. Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред bootstrap.bundle.min.js/ bootstrap.bundle.jsки Попперро дар бар мегирад, то поповҳо кор кунанд!
  • Popovers плагини асбобро ҳамчун вобастагӣ талаб мекунанд.
  • Поповҳо бо сабабҳои иҷроиш дохил мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
  • Дарозии сифр titleва contentарзишҳо ҳеҷ гоҳ поповро нишон намедиҳанд.
  • Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
  • Оғози поповҳо дар унсурҳои пинҳон кор намекунад.
  • Поповарҳо барои .disabledё disabledунсурҳо бояд дар элементи печанда фаъол карда шаванд.
  • Вақте ки аз лангарҳое, ки дар байни сатрҳои гуногун мепечанд, поповҳо дар байни паҳнои умумии лангарҳо марказонида мешаванд. Барои пешгирӣ кардани ин рафтори .text-nowrapхуд истифода баред .<a>
  • Поповҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз DOM пинҳон карда шаванд.
  • Поповҳоро ба шарофати унсури дохили DOM-и сояҳо ба кор андохтан мумкин аст.
Бо нобаёнӣ, ин ҷузъ аз безараргардонии мундариҷаи дарунсохт истифода мебарад, ки ҳама унсурҳои HTML-ро, ки ба таври возеҳ иҷозат дода нашудаанд, хориҷ мекунад. Барои тафсилоти бештар ба бахши санитаризатсия дар ҳуҷҷатҳои JavaScript-и мо нигаред.
Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Хонданро давом диҳед, то бубинед, ки поповерҳо бо баъзе мисолҳо чӣ гуна кор мекунанд.

Мисол: Дар ҳама ҷо поповерҳоро фаъол созед

Як роҳи оғоз кардани ҳама поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи 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-и popover дар дохили он элемент пайдо шавад.

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 дар RTL, дастурҳо инъикос карда мешаванд.

<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>, на тег ва <button>шумо инчунин бояд атрибутро дохил кунед tabindex.

<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аттрибутӣ интерактивӣ нестанд, яъне корбарон наметавонанд онҳоро ба ҷояшон гузоранд ё клик кунанд, то попover (ё маслиҳати абзор) ангезанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки попover-ро аз парпеч <div>ё , бо истифода аз .<span>tabindex="0"

Барои триггерҳои поповери ғайрифаъол, шумо инчунин метавонед бартарӣ data-bs-trigger="hover focus"диҳед, ки popover ҳамчун аксуламали фаврии визуалӣ барои корбарони шумо пайдо шавад, зеро онҳо интизор нашаванд, ки элементи ғайрифаъолро пахш кунанд.

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

Ворид кардани поповерҳо барои корбарони клавиатура ва технологияи ёрирасон

Барои он ки ба корбарони клавиатура иҷозат диҳанд, ки поповҳои шуморо фаъол созанд, шумо бояд онҳоро танҳо ба унсурҳои HTML илова кунед, ки одатан ба клавиатура нигаронидашуда ва интерактивӣ мебошанд (ба монанди истинодҳо ё назорати шакл). Гарчанде ки унсурҳои HTML-и худсарона (ба монанди <span>s) тавассути илова кардани атрибут метавон мутамарказ карда шавад tabindex="0", ин барои корбарони клавиатура таваққуфҳои эҳтимолан хашмгин ва печидаро илова мекунад ва аксари технологияҳои ёрирасон дар айни замон мундариҷаи popover-ро дар ин ҳолат эълон намекунанд. . Илова бар ин, танҳо ба hoverтриггер барои поповҳои худ такя накунед, зеро ин триггерро барои корбарони клавиатура ғайриимкон месозад.

Ҳангоме ки шумо метавонед HTML-и бой ва сохторшударо бо ин htmlимконот ворид кунед, мо ба таври қатъӣ тавсия медиҳем, ки аз илова кардани миқдори зиёди мундариҷа худдорӣ кунед. Тарзи кори поповерҳо дар айни замон ин аст, ки пас аз намоиш додани мундариҷаи онҳо ба унсури триггер бо атрибут пайваст карда aria-describedbyмешавад. Дар натиҷа, тамоми мундариҷаи popover ба корбарони ёрирасони технология ҳамчун як ҷараёни тӯлонӣ ва бефосила эълон карда мешавад.

Илова бар ин, дар ҳоле ки имкон дорад, ки назорати интерактивиро (ба монанди унсурҳои форма ё истинодҳо) ба popover-и худ дохил кунед (бо илова кардани ин унсурҳо ба allowListатрибутҳо ва барчаспҳои иҷозатдодашуда), бидонед, ки дар айни замон popover тартиби фокуси клавиатураро идора намекунад. Вақте ки корбари клавиатура поповоро мекушояд, тамаркуз ба унсури триггерӣ боқӣ мемонад ва чун поповер одатан триггерро дар сохтори ҳуҷҷат фавран пайгирӣ намекунад, ҳеҷ кафолате вуҷуд надорад, ки ба пеш ҳаракат кардан/ пахш карданTABкорбари клавиатураро ба худи popover интиқол медиҳад. Хулоса, танҳо илова кардани назорати интерактивӣ ба popover эҳтимол дорад, ки ин идораҳоро барои корбарони клавиатура ва корбарони технологияҳои ёрирасон дастнорас/корношоям гардонад ё ҳадди аққал як фармоиши фокусии умумиро бемантиқ созад. Дар ин мавридҳо, ба ҷои истифодаи муколамаи модалӣ баррасӣ кунед.

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-bs-монанди замима кунед data-bs-animation="". Ҳангоми интиқоли параметрҳо тавассути атрибутҳои додаҳо, боварӣ ҳосил кунед, ки навъи парвандаи номи опсияро аз camelCase ба kebab-case иваз кунед. Масалан, ба ҷои истифодаи data-bs-customClass="beautifier", истифода баред data-bs-custom-class="beautifier".

Дар хотир доред, ки бо сабабҳои амниятӣ sanitize, sanitizeFn, ва allowListопсияҳоро бо истифода аз атрибутҳои додаҳо таъмин кардан мумкин нест.
Ном Навъи Пешфарз Тавсифи
animation булӣ true Гузариши пажмурдашавии CSS-ро ба popover татбиқ кунед
container сатр | элемент | дурӯғ false

Поповро ба унсури мушаххас замима мекунад. Мисол: container: 'body'. Ин хосият махсусан аз он сабаб муфид аст, ки он ба шумо имкон медиҳад, ки попопверро дар ҷараёни ҳуҷҷат дар наздикии унсури триггер ҷойгир кунед - ин имкон намедиҳад, ки popover ҳангоми тағир додани андозаи тиреза аз элементи триггер шино кунад.

content сатр | элемент | функсия ''

Арзиши мундариҷаи пешфарз, агар data-bs-contentаттрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.

delay рақам | объект 0

Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { "show": 500, "hide": 100 }

html булӣ false HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, innerTextамвол барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
placement сатр | функсия 'right'

Чӣ тавр ҷойгир кардани popover - auto | боло | поён | чап | рост.
Вақте autoки муайян карда мешавад, он поповро ба таври динамикӣ тағир медиҳад.

Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст thisба мисоли popover гузошта шудааст.

selector сатр | дурӯғ false Агар интихобкунанда таъмин карда шавад, объектҳои попов ба ҳадафҳои муайяншуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани поповҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед .
template сатр '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Асоси HTML барои истифода ҳангоми сохтани popover.

Поповар ба titleсӯзандору ворид карда мешавад .popover-header.

Поповар ба contentсӯзандору ворид карда мешавад .popover-body.

.popover-arrowтири поповар мегардад.

Унсури болоии печанда бояд .popoverсинф дошта бошад.

title сатр | элемент | функсия ''

Қимати унвони пешфарз, агар titleатрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.

trigger сатр 'click' Чӣ тавр popover фаъол карда мешавад - пахш кунед | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manualбо ягон триггери дигар якчоя кардан мумкин нест.
fallbackPlacements массив ['top', 'right', 'bottom', 'left'] Ҷойгиркунии такрориро тавассути пешниҳоди рӯйхати ҷойгиркунӣ дар массив муайян кунед (бо тартиби афзалият). Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Поппер муроҷиат кунед
boundary сатр | элемент 'clippingParents' Сарҳади маҳдудияти изофабори попов (танҳо ба тағирдиҳандаи preventOverflow-и Поппер дахл дорад). Бо нобаёнӣ он аст 'clippingParents'ва метавонад истинодҳои HTMLElement-ро қабул кунад (танҳо тавассути JavaScript). Барои маълумоти бештар ба ҳуҷҷатҳои detectOverflow Popper муроҷиат кунед .
customClass сатр | функсия ''

Вақте ки он нишон дода мешавад, ба popover синфҳо илова кунед. Дар хотир доред, ки ин синфҳо ба ғайр аз ҳама синфҳои дар қолаб нишондодашуда илова карда мешаванд. Барои илова кардани якчанд синфҳо, онҳоро бо фосила ҷудо кунед: 'class-1 class-2'.

Шумо инчунин метавонед функсияеро гузаронед, ки бояд як сатри ягонаи дорои номҳои синфҳои иловагиро баргардонад.

sanitize булӣ true Санитаризатсияро фаъол ё ғайрифаъол кунед. Агар фаъол карда 'template'шавад 'content'ва 'title'имконот безарар карда мешаванд. Бахши безараргардониро дар ҳуҷҷатҳои JavaScript- и мо бубинед .
allowList объект Арзиши пешфарз Объект, ки дорои атрибутҳо ва барчаспҳои иҷозатдодашуда мебошад
sanitizeFn null | функсия null Дар ин ҷо шумо метавонед функсияи тозакунии худро таъмин кунед. Ин метавонад муфид бошад, агар шумо мехоҳед китобхонаи махсусро барои анҷом додани санитаризатсия истифода баред.
offset массив | сатр | функсия [0, 8]

Ҷуброни поповор нисбат ба ҳадафаш. Шумо метавонед сатрро дар атрибутҳои додаҳо бо арзишҳои аз вергул ҷудошуда интиқол диҳед, ба монанди:data-bs-offset="10,20"

Вақте ки функсия барои муайян кардани ҷуброн истифода мешавад, он бо объекте даъват карда мешавад, ки ҷойгиркунии поппер, истинод ва ректҳои попперро ҳамчун аргументи аввалини худ дорад. Элементи триггерии гиреҳи DOM ҳамчун далели дуюм интиқол дода мешавад. Функсия бояд массивро бо ду адад баргардонад: .[skidding, distance]

Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Поппер муроҷиат кунед .

popperConfig null | объект | функсия null

Барои тағир додани конфигуратсияи пешфарзии Popper Bootstrap, ба конфигуратсияи Popper нигаред .

Вақте ки функсия барои сохтани конфигуратсияи Popper истифода мешавад, он бо объекте даъват карда мешавад, ки конфигуратсияи пешфарзии Popper Bootstrap-ро дар бар мегирад. Он ба шумо кӯмак мекунад, ки пешфарзро бо конфигуратсияи шахсии худ истифода баред ва якҷоя кунед. Функсия бояд объекти конфигуратсияро барои Поппер баргардонад.

Атрибутҳои маълумот барои поповҳои инфиродӣ

Вариантҳо барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.

Истифодаи функсия боpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

нишон додан

Поповои элементро ошкор мекунад. Ба зангзананда пеш аз намоиши поповер бармегардад (яъне пеш аз shown.bs.popoverрух додани ҳодиса). Ин як ангезаи "дастӣ" ҳисобида мешавад. Поповарҳое, ки унвон ва мундариҷаи онҳо ҳарду дарозии сифр мебошанд, ҳеҷ гоҳ намоиш дода намешаванд.

myPopover.show()

пинҳон

Попповери элементро пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани поповер бармегардад (яъне пеш аз hidden.bs.popoverрух додани ҳодиса). Ин як ангезаи "дастӣ" ҳисобида мешавад.

myPopover.hide()

иваз кардан

Поп-повери элементро иваз мекунад. Ба зангзананда пеш аз он ки popover воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.popoverё ҳодиса) бармегардад. hidden.bs.popoverИн як ангезаи "дастӣ" ҳисобида мешавад.

myPopover.toggle()

ихтиёр кардан

Попвери элементро пинҳон ва нобуд мекунад (Маълумоти захирашударо дар элементи DOM нест мекунад). Поповҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selectorопсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.

myPopover.dispose()

имкон додан

Ба поповери элемент имкон медиҳад, ки нишон дода шавад. Поповҳо бо нобаёнӣ фаъол карда мешаванд.

myPopover.enable()

ғайрифаъол

Қобилияти нишон додани поповери элементро нест мекунад. Попов танҳо дар сурати аз нав фаъол кардани он нишон дода мешавад.

myPopover.disable()

toggleEnabled

Қобилияти нишон додан ё пинҳон кардани поп-повери элементро иваз мекунад.

myPopover.toggleEnabled()

навсозӣ

Мавқеи поповери элементро навсозӣ мекунад.

myPopover.update()

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли поповеро, ки бо унсури 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

Ҳодисаҳо

Навъи ҳодиса Тавсифи
show.bs.popover Ин ҳодиса фавран ҳангоми showдаъват кардани усули мисол сар мешавад.
нишон дода шудааст.bs.popover Ин ҳодиса вақте оғоз мешавад, ки попов ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hide.bs.popover Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.popover Ин ҳодиса пас аз анҷоми пинҳон кардани попов аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
inserted.bs.popover Ин ҳодиса пас аз show.bs.popoverҳодиса, вақте ки қолаби popover ба DOM илова карда шудааст, оғоз мешавад.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})