Popovers
Dokumentācija un piemēri Bootstrap uznirstošo logu, piemēram, operētājsistēmā iOS, pievienošanai jebkuram vietnes elementam.
Pārskats
Lietas, kas jāzina, izmantojot uznirstošo spraudni:
- Popovers pozicionēšanai izmanto trešās puses bibliotēku Popper . Lai uznirstošie elementi darbotos, pirms bootstrap.js jāiekļauj popper.min.js vai jāizmanto
bootstrap.bundle.min.js
/bootstrap.bundle.js
kas satur Popper! - Uznirstošajiem ekrāniem kā atkarība ir nepieciešams rīka padoma spraudnis .
- Uznirstošie elementi ir izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
- Nulles garums
title
uncontent
vērtības nekad neparādīs uznirstošo logu. - Norādiet
container: 'body'
, lai izvairītos no renderēšanas problēmām sarežģītākos komponentos (piemēram, mūsu ievades grupās, pogu grupās utt.). - Uznirstošo logu aktivizēšana slēptajos elementos nedarbosies.
- Uznirstošie elementi
.disabled
vaidisabled
elementiem ir jāaktivizē iesaiņojuma elementā. - Ja to aktivizē enkuri, kas apvij vairākas līnijas, uznirstošie elementi tiks centrēti starp enkuru kopējo platumu. Izmantojiet
.text-nowrap
,<a>
lai izvairītos no šādas uzvedības. - Uznirstošie elementi ir jāslēpj, pirms to atbilstošie elementi ir noņemti no DOM.
- Popovers var tikt aktivizēts, pateicoties elementam, kas atrodas ēnu DOM.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Turpiniet lasīt, lai redzētu, kā darbojas uznirstošie elementi, izmantojot dažus piemērus.
Piemērs: iespējot uznirstošos logus visur
Viens veids, kā inicializēt visus uznirstošos logus lapā, būtu atlasīt tos pēc to data-bs-toggle
atribūta:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Piemērs: container
opcijas izmantošana
Ja vecā elementā ir daži stili, kas traucē uznirstošo logu, jūs vēlaties norādīt pielāgotu container
, lai uznirstošā elementa HTML tiktu rādīts šajā elementā.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
Piemērs
<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>
Četri virzieni
Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi. Norādes tiek atspoguļotas, izmantojot 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>
Noraidīt ar nākamo klikšķi
Izmantojiet focus
aktivizētāju, lai noraidītu uznirstošos logus, kad lietotājs nākamreiz noklikšķina uz cita elementa, nevis uz pārslēgšanas elementa.
Konkrēts marķējums ir nepieciešams, lai atteiktu nākamo klikšķi
Lai nodrošinātu pareizu darbību starp pārlūkprogrammām un platformām, ir jāizmanto <a>
tags, nevis tags, kā <button>
arī jāiekļauj tabindex
atribūts.
<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'
})
Atspējotie elementi
Elementi ar disabled
atribūtu nav interaktīvi, tas nozīmē, ka lietotāji nevar virzīt kursoru vai noklikšķināt uz tiem, lai aktivizētu uznirstošo logu (vai rīka padomu). Kā risinājumu varat aktivizēt uznirstošo pavērsienu no iesaiņojuma <div>
vai <span>
ideālā gadījumā, ja tastatūras fokuss ir piemērots, izmantojot tabindex="0"
.
Atspējotiem uznirstošiem aktivizētājiem varat arī izvēlēties data-bs-trigger="hover focus"
, lai uznirstošais logs lietotājiem tiktu rādīts kā tūlītēja vizuāla atgriezeniskā saite, jo viņi, iespējams, negaidīs, ka noklikšķinās uz atspējota elementa.
<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
Mainīgie lielumi
$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);
Lietošana
Iespējot uznirstošos logus, izmantojot JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Uznirstošo logu izmantošana tastatūras un palīgtehnoloģiju lietotājiem
Lai ļautu tastatūras lietotājiem aktivizēt jūsu uznirstošos logus, jums tie jāpievieno tikai tiem HTML elementiem, kas tradicionāli ir orientēti uz tastatūru un ir interaktīvi (piemēram, saites vai veidlapas vadīklas). Lai gan patvaļīgus HTML elementus (piemēram, <span>
s) var padarīt fokusējamus, pievienojot tabindex="0"
atribūtu, tastatūras lietotājiem tiks pievienotas potenciāli kaitinošas un mulsinošas tabulēšanas pieturas neinteraktīvajiem elementiem, un lielākā daļa palīgtehnoloģiju pašlaik nepaziņo uznirstošā ekrāna saturu šajā situācijā. . Turklāt nepaļaujieties tikai uz hover
uznirstošo logu aktivizētāju, jo tas padarīs tos neiespējamu tastatūras lietotājiem.
Lai gan varat ievietot bagātīgu, strukturētu HTML uznirstošajos logos, izmantojot šo html
opciju, mēs ļoti iesakām izvairīties no pārmērīga satura daudzuma pievienošanas. Pašlaik uznirstošie uznirstošie elementi darbojas tādā veidā, ka pēc parādīšanas to saturs ir saistīts ar aktivizētāja elementu ar aria-describedby
atribūtu. Rezultātā viss popover saturs tiks paziņots palīgtehnoloģiju lietotājiem kā viena gara, nepārtraukta straume.
Turklāt, lai gan uznirstošajā logā ir iespējams iekļaut arī interaktīvas vadīklas (piemēram, veidlapas elementus vai saites) (pievienojot šos elementus allowList
atļautajiem atribūtiem un tagiem), ņemiet vērā, ka pašlaik uznirstošais logs nepārvalda tastatūras fokusa secību. Kad tastatūras lietotājs atver uznirstošo logu, fokuss paliek uz palaišanas elementu, un, tā kā uznirstošais logs parasti neseko uzreiz pēc palaišanas dokumenta struktūrā, nav garantijas, ka, virzoties uz priekšu/nospiežot.TABpārvietos tastatūras lietotāju pašā uznirstošajā logā. Īsāk sakot, vienkārši pievienojot interaktīvas vadīklas uznirstošajam logam, tastatūras lietotājiem un palīgtehnoloģiju lietotājiem šīs vadīklas, visticamāk, kļūs nepieejamas/nelietojamas vai vismaz radīs neloģisku kopējo fokusa secību. Šādos gadījumos apsveriet iespēju izmantot modālu dialoglodziņu.
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-
, tāpat kā data-bs-animation=""
. Nododot opcijas, izmantojot datu atribūtus, noteikti nomainiet opcijas nosaukuma reģistra veidu no camelCase uz kebab-case. Piemēram, tā vietā, lai izmantotu data-bs-customClass="beautifier"
, izmantojiet data-bs-custom-class="beautifier"
.
sanitize
opcijas
sanitizeFn
, un
allowList
opcijas nevar nodrošināt, izmantojot datu atribūtus.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
animation |
Būla | true |
Uznirstošajam logam izmantojiet CSS izbalēšanas pāreju |
container |
stīga | elements | viltus | false |
Pievieno uznirstošo logu konkrētam elementam. Piemērs: |
content |
stīga | elements | funkciju | '' |
Noklusējuma satura vērtība, ja Ja funkcija ir dota, tā tiks izsaukta ar |
delay |
numurs | objektu | 0 |
Uznirstošā loga rādīšanas un slēpšanas aizkave (ms) — neattiecas uz manuālo palaišanas veidu Ja tiek norādīts numurs, aizkave tiek piemērota gan slēpšanai/rādīšanai Objekta struktūra ir šāda: |
html |
Būla | false |
Ievietojiet HTML uznirstošajā logā. Ja aplams, innerText īpašums tiks izmantots, lai ievietotu saturu DOM. Izmantojiet tekstu, ja uztraucaties par XSS uzbrukumiem. |
placement |
stīga | funkciju | 'right' |
Kā novietot uznirstošo logu - auto | uz augšu | apakšā | pa kreisi | pa labi. Ja funkcija tiek izmantota, lai noteiktu izvietojumu, tā tiek izsaukta ar uznirstošo DOM mezglu kā pirmo argumentu un izraisošo elementu DOM mezglu kā otro. Konteksts |
selector |
stīga | viltus | false |
Ja ir nodrošināts atlasītājs, uznirstošie objekti tiks deleģēti norādītajiem mērķiem. Praksē to izmanto, lai dinamiskam HTML saturam iespējotu uznirstošo logu pievienošanu. Skatiet šo un informatīvo piemēru . |
template |
stīga | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Pamata HTML, kas jāizmanto, veidojot uznirstošo logu. Popover's Popover's
Vistālākajam iesaiņojuma elementam jābūt |
title |
stīga | elements | funkciju | '' |
Noklusējuma nosaukuma vērtība, ja Ja funkcija ir dota, tā tiks izsaukta ar |
trigger |
stīga | 'click' |
Kā tiek aktivizēts popover — noklikšķiniet uz | lidināties | fokuss | rokasgrāmata. Jūs varat nodot vairākus trigerus; atdaliet tos ar atstarpi. manual nevar kombinēt ar kādu citu aktivizētāju. |
fallbackPlacements |
masīvs | ['top', 'right', 'bottom', 'left'] |
Definējiet rezerves izvietojumus, nodrošinot izvietojumu sarakstu masīvā (priekšrocību secībā). Papildinformāciju skatiet Popera uzvedības dokumentos |
boundary |
stīga | elements | 'clippingParents' |
Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's detectOverflow docs. |
customClass |
string | function | '' |
Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: You can also pass a function that should return a single string containing additional class names. |
sanitize |
boolean | true |
Enable or disable the sanitization. If activated 'template' , 'content' and 'title' options will be sanitized. See the sanitizer section in our JavaScript documentation. |
allowList |
object | Default value | Object which contains allowed attributes and tags |
sanitizeFn |
null | function | null |
Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
offset |
array | string | function | [0, 8] |
Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: For more information refer to Popper's offset docs. |
popperConfig |
null | object | function | null |
To change Bootstrap's default Popper config, see Popper's configuration. When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
Using function with popperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
show
Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover
event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
myPopover.show()
hide
Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover
event occurs). This is considered a “manual” triggering of the popover.
myPopover.hide()
toggle
Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover
or hidden.bs.popover
event occurs). This is considered a “manual” triggering of the popover.
myPopover.toggle()
dispose
Hides and destroys an element’s popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using the selector
option) cannot be individually destroyed on descendant trigger elements.
myPopover.dispose()
enable
Gives an element’s popover the ability to be shown. Popovers are enabled by default.
myPopover.enable()
disable
Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.
myPopover.disable()
toggleEnabled
Toggles the ability for an element’s popover to be shown or hidden.
myPopover.toggleEnabled()
update
Updates the position of an element’s popover.
myPopover.update()
getInstance
Static method which allows you to get the popover instance associated with a DOM element
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Events
Event type | Description |
---|---|
show.bs.popover | This event fires immediately when the show instance method is called. |
shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.popover | This event is fired immediately when the hide instance method has been called. |
hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.popover | This event is fired after the show.bs.popover event when the popover template has been added to the DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})