Popoverji

Pregled

Stvari, ki jih morate vedeti pri uporabi vtičnika Popover:

• Popovers se za pozicioniranje zanašajo na knjižnico tretjih oseb Popper . Morate vključiti popper.min.js pred bootstrap.js ali uporabiti bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper, da bodo popoveri delovali!
• Popovers zahtevajo vtičnik orodnih namigov kot odvisnost.
• Popovers so opt-in zaradi učinkovitosti, zato jih morate inicializirati sami .
• Ničelna dolžina titlein contentvrednosti ne bodo nikoli prikazale pojavnega pojava.
• Določite container: 'body', da se izognete težavam z upodabljanjem v kompleksnejših komponentah (kot so naše vnosne skupine, skupine gumbov itd.).
• Sprožitev popoverjev na skritih elementih ne bo delovala.
• Popover za .disabledali disabledelemente je treba sprožiti na ovojnem elementu.
• Ko se sprožijo iz sider, ki se prepletajo čez več črt, bodo popoverji centrirani med celotno širino sider. Uporabite .text-nowrapna svojem <a>s, da se izognete temu vedenju.
• Popoverja je treba skriti, preden so njihovi ustrezni elementi odstranjeni iz DOM.
• Popoverje je mogoče sprožiti zahvaljujoč elementu znotraj senčnega DOM.

Nadaljujte z branjem in si oglejte, kako delujejo popoverji z nekaj primeri.

Primer: Povsod omogočite pojavna okna

Eden od načinov inicializacije vseh pojavnih oken na strani bi bil, da jih izberete po njihovem data-bs-toggleatributu:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Primer: Uporaba containermožnosti

Ko imate na nadrejenem elementu nekaj slogov, ki motijo ​​pojavni element, boste želeli določiti po meri container, tako da se bo HTML pojavnega elementa namesto tega pojavil znotraj tega elementa.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Primer

<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>

Štiri smeri

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano. Pri uporabi Bootstrap v RTL so navodila zrcaljena.

<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>

Opusti ob naslednjem kliku

Uporabite focussprožilec, da opustite pojavna okna ob naslednjem kliku uporabnika drugega elementa kot preklopni element.

<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'
})

Onemogočeni elementi

Elementi z disabledatributom niso interaktivni, kar pomeni, da jih uporabniki ne morejo premakniti ali klikniti, da bi sprožili pojavni prikaz (ali opis orodja). Kot nadomestno rešitev boste želeli sprožiti popover iz ovoja <div>ali <span>, v idealnem primeru narejenega za fokusiranje s tipkovnico, z uporabo tabindex="0".

Pri onemogočenih sprožilcih pojavnega pojavnega elementa boste morda želeli tudi data-bs-trigger="hover focus", da se pojavni pojav prikaže kot takojšnja vizualna povratna informacija vašim uporabnikom, saj morda ne pričakujejo, da bodo kliknili onemogočen element.

<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

Spremenljivke

$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);

Uporaba

Omogoči pojavna okna prek JavaScripta:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-animation="". Pri posredovanju možnosti prek podatkovnih atributov spremenite vrsto malega črke imena možnosti iz camelCase v kebab-case. Na primer, namesto uporabite data-bs-customClass="beautifier", uporabite data-bs-custom-class="beautifier".

Uporaba funkcije zpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metode

pokazati

Razkrije popover elementa. Vrne se k klicatelju, preden je pojavno okno dejansko prikazano (tj. preden shown.bs.popoverpride do dogodka). To velja za »ročno« sprožitev popoverja. Popoverji, katerih naslov in vsebina sta ničelne dolžine, niso nikoli prikazani.

myPopover.show()

skriti

Skrije pojavni element elementa. Vrne se k klicatelju, preden je bil popover dejansko skrit (tj. preden hidden.bs.popoverpride do dogodka). To velja za »ročno« sprožitev popoverja.

myPopover.hide()

preklop

Preklopi pojavni element elementa. Vrne se klicatelju, preden je pojavni element dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.popoverali ). hidden.bs.popoverTo velja za »ročno« sprožitev popoverja.

myPopover.toggle()

odstraniti

Skrije in uniči pojavni element elementa (Odstrani shranjene podatke o elementu DOM). Popoverjev, ki uporabljajo delegiranje (ki so ustvarjeni z možnostjo selector) , ni mogoče posamično uničiti na podrejenih prožilnih elementih.

myPopover.dispose()

omogočiti

Omogoča prikaz pojavnega elementa. Popoverji so privzeto omogočeni.

myPopover.enable()

onemogočiti

Odstrani možnost prikaza pojavnega elementa. Popover bo lahko prikazan samo, če je ponovno omogočen.

myPopover.disable()

preklopiOmogočeno

Preklopi možnost, da je pojavni element elementa prikazan ali skrit.

myPopover.toggleEnabled()

nadgradnja

Posodobi položaj pojavnega elementa.

myPopover.update()

getInstance

Statična metoda, ki vam omogoča, da dobite pojavni primerek, povezan z elementom DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Statična metoda, ki vam omogoča, da dobite pojavni primerek, povezan z elementom DOM, ali ustvarite novega, če ni bil inicializiran

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Dogodki

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})