Поповерҳо
Ҳуҷҷатҳо ва мисолҳо барои илова кардани 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-и сояҳо ба кор андохтан мумкин аст.
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 |
Поповро ба унсури мушаххас замима мекунад. Мисол: |
content |
сатр | элемент | функсия | '' |
Арзиши мундариҷаи пешфарз, агар Агар функсия дода шавад, он бо |
delay |
рақам | объект | 0 |
Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад Сохтори объект ин аст: |
html |
булӣ | false |
HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, innerText амвол барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред. |
placement |
сатр | функсия | 'right' |
Чӣ тавр ҷойгир кардани popover - auto | боло | поён | чап | рост. Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст |
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 |
сатр | элемент | функсия | '' |
Қимати унвони пешфарз, агар Агар функсия дода шавад, он бо |
trigger |
сатр | 'click' |
Чӣ тавр popover фаъол карда мешавад - пахш кунед | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manual бо ягон триггери дигар якчоя кардан мумкин нест. |
fallbackPlacements |
массив | ['top', 'right', 'bottom', 'left'] |
Ҷойгиркунии такрориро тавассути пешниҳоди рӯйхати ҷойгиркунӣ дар массив муайян кунед (бо тартиби афзалият). Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Поппер муроҷиат кунед |
boundary |
сатр | элемент | 'clippingParents' |
Сарҳади маҳдудияти изофабори попов (танҳо ба тағирдиҳандаи preventOverflow-и Поппер дахл дорад). Бо нобаёнӣ он аст 'clippingParents' ва метавонад истинодҳои HTMLElement-ро қабул кунад (танҳо тавассути JavaScript). Барои маълумоти бештар ба ҳуҷҷатҳои detectOverflow Popper муроҷиат кунед . |
customClass |
сатр | функсия | '' |
Вақте ки он нишон дода мешавад, ба popover синфҳо илова кунед. Дар хотир доред, ки ин синфҳо ба ғайр аз ҳама синфҳои дар қолаб нишондодашуда илова карда мешаванд. Барои илова кардани якчанд синфҳо, онҳоро бо фосила ҷудо кунед: Шумо инчунин метавонед функсияеро гузаронед, ки бояд як сатри ягонаи дорои номҳои синфҳои иловагиро баргардонад. |
sanitize |
булӣ | true |
Санитаризатсияро фаъол ё ғайрифаъол кунед. Агар фаъол карда 'template' шавад 'content' ва 'title' имконот безарар карда мешаванд. Бахши безараргардониро дар ҳуҷҷатҳои JavaScript- и мо бубинед . |
allowList |
объект | Арзиши пешфарз | Объект, ки дорои атрибутҳо ва барчаспҳои иҷозатдодашуда мебошад |
sanitizeFn |
null | функсия | null |
Дар ин ҷо шумо метавонед функсияи тозакунии худро таъмин кунед. Ин метавонад муфид бошад, агар шумо мехоҳед китобхонаи махсусро барои анҷом додани санитаризатсия истифода баред. |
offset |
массив | сатр | функсия | [0, 8] |
Ҷуброни поповор нисбат ба ҳадафаш. Шумо метавонед сатрро дар атрибутҳои додаҳо бо арзишҳои аз вергул ҷудошуда интиқол диҳед, ба монанди: Вақте ки функсия барои муайян кардани ҷуброн истифода мешавад, он бо объекте даъват карда мешавад, ки ҷойгиркунии поппер, истинод ва ректҳои попперро ҳамчун аргументи аввалини худ дорад. Элементи триггерии гиреҳи DOM ҳамчун далели дуюм интиқол дода мешавад. Функсия бояд массивро бо ду адад баргардонад: . Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Поппер муроҷиат кунед . |
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...
})