Поповерлар
Bootstrap поповерларын өстәү өчен документлар һәм мисаллар, iOS'дагы кебек, сезнең сайттагы теләсә нинди элементка.
Гомуми күзәтү
Поповер плагинын кулланганда белергә кирәк нәрсәләр:
- Поповерлар позиция өчен өченче як китапханәсе Попперга таяналар . Сез bootstrap.js алдыннан popper.min.js кертергә яки поповерлар эшләсен өчен Popper булган
bootstrap.bundle.min.js
/ кулланырга тиеш!bootstrap.bundle.js
- Поповерлар бәйләнеш буларак кораллар плагинын таләп итәләр.
- Поповерлар башкару сәбәпләре аркасында сайланалар, шуңа күрә сез аларны үзегез башларг�� тиеш .
- Нуль озынлыгы
title
һәмcontent
кыйммәтләре беркайчан да поповерны күрсәтмәячәк. container: 'body'
Катлаулырак компонентларда проблемалар килеп чыкмасын өчен күрсәтегез (безнең кертү төркемнәре, төймә төркемнәре һ.б.).- Яшерен элементлардагы поповерлар эшләмәячәк.
- Поповерлар
.disabled
якиdisabled
элементлар төрү элементында башланырга тиеш. - Берничә сызык белән уралган якорьлардан башлангач, поповерлар якорьларның гомуми киңлеге арасында урнашачак. Бу тәртиптән саклану өчен с-ларда
.text-nowrap
кулланыгыз .<a>
- Поповерлар тиешле элементлар DOMдан чыгарылганчы яшерелергә тиеш.
- Поповерлар DOM күләгәсендәге элемент ярдәмендә башланырга мөмкин.
prefers-reduced-motion
медиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз
.
Кайбер мисаллар белән поповерларның ничек эшләвен күрү өчен укуны дәвам итегез.
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>
тегны кулланырга тиеш, һәм сез шулай ук атрибутны кертергә тиеш .<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
интерактив түгел, димәк, кулланучылар поповерны (яки кораллар) җибәрү өчен аларны йөртә алмыйлар. Эш урыны буларак, сез поповерны төргәктән <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)
Клавиатура һәм ярдәмче технология кулланучылар өчен поповерлар эшләү
Клавиатура кулланучыларына сезнең поповерларны активлаштырырга рөхсәт итәр өчен, сез аларны HTML клавиатурасына игътибарлы һәм интерактив булган элементларга өстәргә тиеш (мәсәлән, сылтамалар яки форма белән идарә итү). Характерлы HTML элементлары (мәсәлән <span>
) tabindex="0"
атрибутны өстәп игътибарны тупларга мөмкин булса да, бу клавиатура кулланучылары өчен интерактив булмаган элементларга потенциаль рәнҗетүче һәм буталчык өстәмә тукталышлар өстәячәк, һәм күпчелек ярдәмче технологияләр хәзерге вакытта поповерның эчтәлеген игълан итмиләр. . Өстәвенә, поповерларыгыз өчен триггер буларак кына таянмагыз hover
, чөнки бу аларны клавиатура кулланучылары өчен эшләтеп җибәрә алмас.
Сез вариант белән поповерларга бай, структуралы HTML кертә аласыз html
, без артык күп эчтәлек кертмәскә киңәш итәбез. Хәзерге вакытта поповерларның эшләве - бер тапкыр күрсәтелгәндә, аларның эчтәлеге триггер элементына aria-describedby
атрибут белән бәйләнгән. Нәтиҗәдә, поповерның эчтәлеге технология кулланучыларына бер озын, өзлексез агым буларак ярдәм итәр өчен игълан ителәчәк.
Өстәвенә, интерактив контрольне (форма элементлары яки сылтамалар кебек) поповерга кертергә мөмкин булса да (бу элементларны allowList
рөхсәт ителгән атрибутларга һәм тэгларга өстәп), шуны онытмагыз: хәзерге вакытта поповер клавиатура фокус тәртибе белән идарә итми. Клавиатура кулланучы поповерны ачканда, фокус триггер элементына кала, һәм поповер гадәттә документ структурасында триггерга иярмәгәнгә, алга бару / басу гарантиясе юк.TABклавиатура кулланучыны поповерның үзенә күчерәчәк. Кыскасы, поповерга интерактив контроль өстәү, бу контрольләрне клавиатура кулланучылары һәм ярдәмче технологияләр кулланучылары өчен кулланып булмый / кулланмый, яки ким дигәндә логик булмаган гомуми фокус тәртибен ясый. Бу очракларда аның урынына модаль диалог кулланырга уйлагыз.
Вариантлар
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-bs-
өстәгез data-bs-animation=""
. Вариантларның мәгълүмат төрен camelCase'тан kebab-case'ка мәгълүмат атрибутлары аша биргәндә үзгәртегез. Мәсәлән, куллану урынына data-bs-customClass="beautifier"
кулланыгыз data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
һәм
allowList
вариантлар мәгълүмат атрибутлары ярдәмендә бирелә алмый.
Исем | Тип | Килешү | Тасвирлау |
---|---|---|---|
animation |
буле | true |
Поповерга CSS сүнгән күчүне кулланыгыз |
container |
кыл | элемент | ялган | false |
Поповерны билгеле бер элементка өсти. Мисал : |
content |
кыл | элемент | функциясе | '' |
Әгәр дә функция бирелсә, ул |
delay |
саны | объект | 0 |
Поповерны күрсәтү һәм яшерү (мс) - кул белән эшләнгән триггер төренә кагылмый Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла Объект структурасы: |
html |
буле | false |
Поповерга HTML кертү. Ялган булса, innerText милек DOMга эчтәлек кертү өчен кулланылачак. XSS һөҗүмнәре турында борчылсагыз, текст кулланыгыз. |
placement |
кыл | функциясе | 'right' |
Поповерны ничек урнаштырырга - авто | өстә | аста | сул | уң. Урнаштыруны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак поповер 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 нигезе. Поповерның Поповерның
Тышкы төрү элементы |
title |
кыл | элемент | функциясе | '' |
Әгәр дә функция бирелсә, ул |
trigger |
кыл | 'click' |
Поповер ничек этәрелә - басыгыз | | фокус | кулланма. Сез берничә триггер узарга мөмкин; аларны бушлык белән аерыгыз. manual бүтән триггер белән берләштереп булмый. |
fallbackPlacements |
массив | ['top', 'right', 'bottom', 'left'] |
Массадагы урнаштыру исемлеген биреп, кире кайту урыннарын билгеләгез (өстенлек тәртибендә). Күбрәк мәгълүмат өчен Попперның тәртип документларына мөрәҗәгать итегез |
boundary |
кыл | элемент | 'clippingParents' |
Поповерның ташып торган чик чикләре (Попперның профилактикасы Оверфлоу модификаторына гына кагыла). Килешү буенча ул 'clippingParents' һәм HTMLElement сылтамасын кабул итә ала (JavaScript аша гына). Күбрәк мәгълүмат өчен Popper's detectOverflow документларына мөрәҗәгать итегез . |
customClass |
кыл | функциясе | '' |
Күрсәтелгәндә поповерга класслар өстәгез. Игътибар итегез, бу класслар шаблонда күрсәтелгән теләсә нинди классларга өстәп өстәләчәк. Берничә класс өстәр өчен, аларны урыннар белән аерыгыз : Сез шулай ук өстәмә класс исемнәре булган бер сызыкны кайтарырга тиеш функцияне уза аласыз. |
sanitize |
буле | true |
Санитизацияне эшләтеп җибәрү яки сүндерү. Активлаштырылса 'template' , 'content' вариантлар 'title' санитарлаштырылачак. Безнең JavaScript документациясендә санитизатор бүлеген карагыз . |
allowList |
объект | Килешенгән кыйммәт | Рөхсәт ителгән атрибутлар һәм тэглар булган объект |
sanitizeFn |
null | функциясе | null |
Монда сез үзегезнең санитария функциясен тәкъдим итә аласыз. Санитизация ясау өчен махсус китапханә кулланырга теләсәгез, бу файдалы булырга мөмкин. |
offset |
массив | кыл | функциясе | [0, 8] |
Максатка караганда поповерның офсеты. Сез мәгълүмат атрибутларында үтем белән аерылган кыйммәтләр белән уза аласыз: Офсетны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак поппер урнаштыру, белешмәлек һәм поппер ректлары булган объект белән атала. Икенче аргумент буларак DOM төененең этәргеч элементы уза. Функция ике сан белән массивны кайтарырга тиеш : . Күбрәк мәгълүмат өчен Попперның офсет документларына мөрәҗәгать итегез . |
popperConfig |
null | объект | функциясе | null |
Bootstrap'ның default Popper конфигурациясен үзгәртү өчен, Popper конфигурациясен карагыз . Popper конфигурациясен булдыру өчен функция кулланылганда, ул Bootstrap'ның демократик Popper конфигурациясен үз эченә алган объект белән атала. Бу сиңа конфигурацияне кулланырга һәм берләштерергә ярдәм итә. Функция Popper өчен конфигурация объектын кайтарырга тиеш. |
Аерым поповерлар өчен мәгълүмат атрибутлары
Индивидуаль поповерлар өчен вариантлар, өстә аңлатылганча, мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.
Белән функция куллану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()
күчү
Элементның поповерын алыштыра. Чакыручыга поповер күрсәтелгәнче яки яшерелгәнче кире кайта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
Вакыйгалар
Вакыйга төре | Тасвирлау |
---|---|
show.bs.popover | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
күрсәтелгән.bs.popover | Бу вакыйга кулланучыга күренгәннән соң (CSS күчү тәмамлануын көтеп торачак). |
hide.bs.popover | hide Бу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла . |
hidden.bs.popover | Бу вакыйга поповер кулланучыдан яшерелгәннән соң җибәрелә (CSS күчү тәмамлануын көтәр). |
insert.bs.popover | Бу вакыйга show.bs.popover DOMга поповер шаблоны өстәлгәннән соң җибәрелә. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})