Popovers
Сайтыңыздагы каалаган элементке iOS'то табылгандар сыяктуу Bootstrap поповерлерин кошуу үчүн документтер жана мисалдар.
Обзор
Popover плагинин колдонууда билүү керек болгон нерселер:
- Поповерлер жайгаштыруу үчүн үчүнчү тараптын Поппер китепканасына таянышат . Сиз popper.min.js файлын bootstrap.js алдында камтышыңыз керек же попоперлер иштеши үчүн Popper камтылган
bootstrap.bundle.min.js
/ колдонушуңуз керек!bootstrap.bundle.js
- Popovers көз карандылык катары инструменттин плагинин талап кылат.
- Поповерлер майнаптуулугу үчүн кошулат, андыктан аларды өзүңүз башташыңыз керек .
- Нөл узундуктагы
title
жанаcontent
баалуулуктар эч качан калкып чыгууну көрсөтпөйт. container: 'body'
Татаалыраак компоненттерде (мисалы, киргизүү топторубуз, баскыч топторубуз ж.б.) көйгөйлөрдү жаратпаш үчүн белгилеңиз .- Жашыруун элементтерде поповерлерди иштетүү иштебейт.
.disabled
Үчүн жеdisabled
элементтер үчүн поповерлер орогуч элементинде иштетилиши керек.- Бир нече сызыктар боюнча оролгон анкерлерден иштетилгенде, поповерлер анкерлердин жалпы туурасынын ортосуна жайгаштырылат. Бул жүрүм-турумду болтурбоо үчүн
.text-nowrap
сиздин с боюнча колдонуңуз .<a>
- Поповерлер алардын тиешелүү элементтери DOMдан алынып салынганга чейин жашырылышы керек.
- Popovers көлөкө 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
анын ордуна popover 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>
Төрт багыт
Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген. RTLде 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"
.
Өчүрүлгөн popover триггерлери үчүн, сиз ошондой эле поповер колдонуучуларыңызга дароо визуалдык пикир катары көрүнүшүн кааласаңыз болот, анткени алар өчүрүлгөн элементти басууну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>
Sass
Өзгөрмөлөр
$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"
атрибутун кошуу менен фокус кылса болот, бирок бул клавиатура колдонуучулары үчүн интерактивдүү эмес элементтерге потенциалдуу тажатма жана башаламан өтмөктөрдү кошот жана азыркы учурда көпчүлүк жардамчы технологиялар бул кырдаалда поповердин мазмунун жарыялабайт. . hover
Кошумчалай кетсек, поповерлериңиз үчүн триггер катары гана ишенбеңиз , анткени бул аларды клавиатура колдонуучулары үчүн ишке киргизүү мүмкүн эмес кылат.
Поповерлерге бай, структураланган HTML кыстарсаңыз да html
, ашыкча көлөмдөгү мазмунду кошуудан качууну сунуштайбыз. Учурда поповерлердин иштөө жолу - көрсөтүлгөндөн кийин, алардын мазмуну aria-describedby
атрибут менен триггер элементине байланган. Натыйжада, поповердин бүт мазмуну жардамчы технология колдонуучуларына бир узун, үзгүлтүксүз агым катары жарыяланат.
Кошумчалай кетсек, поповериңизге интерактивдүү башкаруу элементтерин (мисалы, форма элементтери же шилтемелер) кошуу мүмкүн болсо да (бул элементтерди allowList
уруксат берилген атрибуттарга жана тегдерге кошуу менен), учурда поповер клавиатуранын фокус тартибин башкара албасын эске алыңыз. Баскычтоп колдонуучусу калкып чыгуучу элементти ачканда, фокус козгоочу элементте калат жана поповер адатта документтин түзүмүндөгү триггерди дароо ээрчип кетпегендиктен, алдыга жылдыруу/басууда кепилдик жок.TABклавиатуранын колдонуучусун поповердин өзүнө жылдырат. Кыскача айтканда, жөн гана интерактивдүү башкаруу элементтерин поповерге кошуу бул башкаруу элементтерин клавиатура колдонуучулары жана жардамчы технологияларды колдонуучулар үчүн жеткиликсиз/колдонууга жараксыз кылып коюшу мүмкүн, же жок дегенде логикага сыйбаган жалпы фокус тартибин түзүшү мүмкүн. Мындай учурларда, анын ордуна модалдык диалогду колдонууну карап көрөлү.
Параметрлер
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-bs-
, сыяктуу эле кошуңуз data-bs-animation=""
. Опцияларды маалымат атрибуттары аркылуу өткөрүп жатканда, опциондун аталышынын кейпинин түрүн camelCaseтен кебаб-кепке өзгөртүүнү унутпаңыз. Мисалы, колдонуунун ордуна data-bs-customClass="beautifier"
, колдонуңуз data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, жана
allowList
опцияларын маалымат атрибуттары менен камсыздоо мүмкүн эмес экенин эске алыңыз.
аты | Type | Демейки | Description |
---|---|---|---|
animation |
логикалык | true |
Калкыма файлга CSS өчүп өтүүнү колдонуңуз |
container |
string | элемент | жалган | false |
Белгилүү бир элементке калкыма тиркелет. Мисал: |
content |
string | элемент | функция | '' |
Эгерде функция берилсе, ал |
delay |
саны | объект | 0 |
Поповерди көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат Объекттин структурасы: |
html |
логикалык | false |
HTMLди калкып чыгуучу жерге кыстарыңыз. Эгер жалган болсо, innerText мулк DOMга мазмун киргизүү үчүн колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз. |
placement |
string | функция | 'right' |
Поповерди кантип жайгаштыруу керек - авто | top | түбү | сол | туура. Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары popover DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст |
selector |
string | жалган | 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 |
string | элемент | функция | '' |
Эгерде функция берилсе, ал |
trigger |
сап | 'click' |
Поповер кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manual башка триггер менен айкалыштыруу мүмкүн эмес. |
fallbackPlacements |
массив | ['top', 'right', 'bottom', 'left'] |
Массивдеги жайгаштыруулардын тизмесин берүү менен кайра жайгаштырууларды аныктаңыз (артыкчылык иретинде). Көбүрөөк маалымат алуу үчүн Поппердин жүрүм-турум документтерине кайрылыңыз |
boundary |
string | элемент | 'clippingParents' |
Поповердин толуп кетүү чектөө чеги (Поппердин preventOverflow өзгөрткүчүнө гана тиешелүү). Демейки боюнча, ал 'clippingParents' HTMLElement шилтемесин кабыл алат жана (JavaScript аркылуу гана). Көбүрөөк маалымат алуу үчүн Поппердин detectOverflow документтерине кайрылыңыз . |
customClass |
string | функция | '' |
Көрсөткүчтөргө класстарды кошуңуз. Бул класстар шаблондо көрсөтүлгөн класстарга кошумча кошулаарын эске алыңыз. Бир нече класстарды кошуу үчүн аларды боштуктар менен бөлүңүз: Сиз ошондой эле кошумча класс атын камтыган бир сапты кайтара турган функцияны өткөрүп бере аласыз. |
sanitize |
логикалык | true |
Санитизацияны иштетүү же өчүрүү. Эгер жандырылса 'template' , опциялар тазаланат 'content' . Биздин JavaScript документтерибиздин дезинфекциялоочу бөлүгүн'title' караңыз . |
allowList |
объект | Демейки маани | Уруксат берилген атрибуттарды жана тегдерди камтыган объект |
sanitizeFn |
null | функция | null |
Бул жерде сиз өзүңүздүн дезинфекциялоо функциясын бере аласыз. Санитизациялоо үчүн атайын китепкананы колдонууну кааласаңыз, бул пайдалуу болушу мүмкүн. |
offset |
массив | string | функция | [0, 8] |
Поповердин максатына салыштырмалуу жылышы. Сиз маалымат атрибуттарында сапты үтүр менен бөлүнгөн маанилер менен өткөрө аласыз, мисалы: Функция жылышууну аныктоо үчүн колдонулганда, анын биринчи аргументи катары поппер жайгашуусун, шилтемени жана поппер түзмөгүн камтыган объект менен чакырылат. Иштетүүчү элемент DOM түйүнү экинчи аргумент катары өткөрүлөт. Функция эки сандан турган массивди кайтарышы керек: . Көбүрөөк маалымат алуу үчүн Поппердин офсеттик документтерине кайрылыңыз . |
popperConfig |
null | объект | функция | null |
Bootstrap демейки Popper конфигурациясын өзгөртүү үчүн Поппердин конфигурациясын караңыз . Функция Popper конфигурациясын түзүү үчүн колдонулганда, ал Bootstrap демейки 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()
toggleEnabled
Элементтин поповерин көрсөтүү же жашыруу мүмкүнчүлүгүн өчүрөт.
myPopover.toggleEnabled()
жаңыртуу
Элементтин поповеринин абалын жаңыртат.
myPopover.update()
getInstance
DOM элементи менен байланышкан popover инстанциясын алууга мүмкүндүк берген статикалык ыкма
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
DOM элементи менен байланышкан popover инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Окуялар
Окуя түрү | Description |
---|---|
show.bs.popover | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
show.bs.popover | Бул окуя поповер колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт). |
hide.bs.popover | Бул окуя hide инстанция ыкмасы чакырылганда дароо өчүрүлөт. |
hidden.bs.popover | Бул окуя поповер колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
inserted.bs.popover | Бул окуя show.bs.popover DOMга popover үлгүсү кошулгандан кийин өчүрүлөт. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})