Поповерлер
Құжаттар мен сайтыңыздағы кез келген элементке iOS жүйесінде табылғандар сияқты Bootstrap қалқымалы файлдарын қосуға арналған мысалдар.
Шолу
Popover плагинін пайдалану кезінде білу керек нәрселер:
- Поповерлер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Сіз popper.min.js файлын bootstrap.js алдында қосуыңыз керек немесе popovers жұмыс істеуі үшін Popper бар
bootstrap.bundle.min.js
/ пайдалануыңыз керек!bootstrap.bundle.js
- Popovers тәуелділік ретінде құралдар тақтасының плагинін қажет етеді.
- Popovers өнімділік себептері бойынша қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
- Нөлдік ұзындық
title
пенcontent
мәндер ешқашан қалқымалы терезені көрсетпейді. container: 'body'
Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .- Жасырын элементтерде қалқандарды іске қосу жұмыс істемейді.
.disabled
Қаптама элементінде немесеdisabled
элементтер үшін поповерлер іске қосылуы керек.- Бірнеше жолдар бойымен оралатын якорьлерден іске қосылғанда, қалқымалы белгілер якорьдің жалпы ені арасында ортаға орналасады. Бұл әрекетті болдырмау үшін s
.text-nowrap
on yours пайдаланыңыз .<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
оның орнына қалқымалы файлдың 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"
.
Өшірілген қалқымалы триггерлер үшін қалқымалы триггерлер пайдаланушыларыңызға дереу көрнекі кері байланыс ретінде пайда болуын қалауыңыз мүмкін, себебі олар өшірілген элементті басуды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>
Сасс
Айнымалылар
$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 арқылы popovers қосыңыз:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Пернетақта мен көмекші технология пайдаланушылары үшін поповерлер жұмыс істеуге мүмкіндік береді
Пернетақта пайдаланушыларына қалқымалы терезелерді белсендіруге рұқсат беру үшін оларды дәстүрлі түрде пернетақтаға бағдарланатын және интерактивті (сілтемелер немесе пішін басқару элементтері сияқты) HTML элементтеріне ғана қосу керек. Еркін HTML элементтерін (мысалы, <span>
s) tabindex="0"
атрибут қосу арқылы фокустайтын етіп жасауға болады, бірақ бұл пернетақта пайдаланушылары үшін интерактивті емес элементтерге әлеуетті тітіркендіргіш және шатастыратын қойындыларды қосады және қазіргі уақытта көптеген көмекші технологиялар бұл жағдайда қалқымалы мазмұнды жарияламайды. . hover
Оған қоса, тек қалқымалы файлдар үшін триггер ретінде ғана сенбеңіз, себебі бұл оларды пернетақта пайдаланушылары үшін іске қосу мүмкін емес етеді.
Опциясы бар қалқымалы терезелерге бай, құрылымды HTML кірістіре алатын html
болсаңыз да, мазмұнның шамадан тыс мөлшерін қосудан аулақ болуды ұсынамыз. Қалқымалы құрылғылардың қазіргі уақытта жұмыс істеу тәсілі - көрсетілгеннен кейін олардың мазмұны төлсипатпен триггер элементімен aria-describedby
байланыстырылады. Нәтижесінде, popover мазмұнының толық бөлігі көмекші технология пайдаланушыларына бір ұзақ, үздіксіз ағын ретінде жарияланады.
Сонымен қатар, қалқымалы құралға интерактивті басқару элементтерін (пішін элементтері немесе сілтемелер сияқты) қосуға болады (осы элементтерді allowList
рұқсат етілген атрибуттар мен тегтерге қосу арқылы), қалқымалы құрал қазіргі уақытта пернетақта фокус тәртібін басқармайтынын ескеріңіз. Пернетақта пайдаланушысы қалқымалы терезені ашқанда, фокус іске қосу элементінде қалады және қалқымалы құрылғы әдетте құжат құрылымындағы триггерді бірден орындамайтындықтан, алға жылжу/басу кепілдігі жоқ.TABпернетақта пайдаланушысын қалқымалы терезеге жылжытады. Қысқасы, қалқымалы терезеге жай ғана интерактивті басқару элементтерін қосу бұл басқару элементтерін пернетақта пайдаланушылары мен көмекші технологияларды пайдаланушылар үшін қол жетімсіз/пайдасыз етеді немесе кем дегенде логикалық емес жалпы фокус тәртібін жасайды. Мұндай жағдайларда оның орнына модальды диалогты пайдалануды қарастырыңыз.
Опциялар
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-bs-
сияқты қосыңыз data-bs-animation=""
. Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін camelCase-тан кебаб-капқа өзгертуді ұмытпаңыз. Мысалы, пайдаланудың орнына 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' |
Қалқымалы құрылғыны қалай орналастыруға болады - авто | жоғарғы | төменгі | сол жақ | дұрыс. Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде 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. Попопвер ішке Попопвер ішке
Ең сыртқы орауыш элементінде |
title |
жол | элемент | функциясы | '' |
Егер функция берілсе, ол |
trigger |
жол | 'click' |
Popover қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. manual басқа триггермен біріктіру мүмкін емес. |
fallbackPlacements |
массив | ['top', 'right', 'bottom', 'left'] |
Жиымдағы орналастырулар тізімін беру арқылы резервтік орналастыруларды анықтаңыз (артықшылық ретімен). Қосымша ақпаратты Поппердің мінез-құлық құжаттарынан қараңыз |
boundary |
жол | элемент | 'clippingParents' |
Қалқымалы құрылғының толып кету шектеуінің шекарасы (тек Поппердің preventOverflow модификаторына қолданылады). Әдепкі бойынша ол 'clippingParents' HTMLElement сілтемесін қабылдай алады (тек JavaScript арқылы). Қосымша ақпаратты Поппердің detectOverflow құжаттарынан қараңыз . |
customClass |
жол | функциясы | '' |
Көрсетілгенде қалқымалы терезеге сыныптарды қосыңыз. Бұл сыныптар үлгіде көрсетілген кез келген сыныптарға қосымша қосылатынын ескеріңіз. Бірнеше сыныптарды қосу үшін оларды бос орындармен бөліңіз: Сондай-ақ қосымша сынып атаулары бар жалғыз жолды қайтаратын функцияны беруге болады. |
sanitize |
логикалық | true |
Санитизацияны қосыңыз немесе өшіріңіз. Белсендірілген болса 'template' , 'content' опциялар 'title' тазартылады. Біздің JavaScript құжаттамасындағы тазартқыш бөлімін қараңыз . |
allowList |
объект | Әдепкі мән | Рұқсат етілген төлсипаттар мен тегтерді қамтитын нысан |
sanitizeFn |
null | функциясы | null |
Мұнда сіз өзіңіздің дезинфекциялау функциясын бере аласыз. Санитизацияны орындау үшін арнайы кітапхананы пайдаланғыңыз келсе, бұл пайдалы болуы мүмкін. |
offset |
массив | жол | функциясы | [0, 8] |
Мақсатқа қатысты поповердің ығысуы. Жолды деректер атрибуттарында үтірмен бөлінген мәндермен жіберуге болады, мысалы: Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде поппер орналасуын, сілтемесін және поппер ректтерін қамтитын нысанмен шақырылады. Іске қосу элементінің DOM түйіні екінші аргумент ретінде жіберіледі. Функция екі саны бар массивді қайтаруы керек: . Қосымша ақпаратты Поппердің офсеттік құжаттарынан қараңыз . |
popperConfig |
null | нысан | функциясы | null |
Bootstrap әдепкі 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()
қосу
Элементтің қалқымалы терезесін көрсету мүмкіндігін береді. Popovers әдепкі бойынша қосылады.
myPopover.enable()
өшіру
Элементтің қалқымалы нұсқасының көрсетілу мүмкіндігін жояды. Қалқымалы құрылғы қайта қосылғанда ғана көрсетіледі.
myPopover.disable()
toggleEnabled
Элементтің қалқымалы нұсқасын көрсету немесе жасыру мүмкіндігін ауыстырады.
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 ауысуларының аяқталуын күтеді). |
inserted.bs.popover | Бұл оқиға show.bs.popover popover үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})