Popovers

Pregled

Stvari koje trebate znati kada koristite dodatak za popover:

• Popovers se oslanjaju na Popper biblioteku treće strane za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper da bi popovers radili!
• Popovers zahtijevaju dodatak s opisom alata kao ovisnost.
• Popovers su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
• Nulta dužina titlei contentvrijednosti nikada neće prikazati iskakanje.
• Navedite container: 'body'kako biste izbjegli probleme s prikazivanjem u složenijim komponentama (kao što su naše grupe za unos, grupe dugmadi, itd.).
• Pokretanje iskačućih prikaza na skrivenim elementima neće raditi.
• Skočni prikazi za .disabledili disabledelemente moraju se pokrenuti na elementu omotača.
• Kada se aktiviraju iz sidra koja se premotaju preko više linija, skočni prozori će biti centrirani između ukupne širine sidra. Koristite .text-nowrapna vašem <a>s da biste izbjegli ovo ponašanje.
• Popovers moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
• Popovers se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.

Nastavite čitati kako biste vidjeli kako iskočnici funkcioniraju s nekim primjerima.

Primjer: Omogućite iskačuće prikaze svuda

Jedan od načina da se inicijaliziraju svi skočni prozori na stranici bio bi da ih odaberete prema njihovom data-bs-toggleatributu:

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

Primjer: Korištenje containeropcije

Kada imate neke stilove na roditeljskom elementu koji ometaju iskačući prikaz, htjet ćete specificirati prilagođeni containertako da se HTML iskačućeg elementa umjesto toga pojavljuje unutar tog elementa.

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

Primjer

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

Četiri pravca

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato. Uputstva se preslikavaju kada koristite Bootstrap u RTL-u.

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

Odbacite sljedećim klikom

Upotrijebite focusokidač da odbacite iskačuće prikaze pri sljedećem kliku korisnika na element koji se razlikuje od elementa za prebacivanje.

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

Onemogućeni elementi

Elementi s disabledatributom nisu interaktivni, što znači da korisnici ne mogu preći pokazivačem miša ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis alata). Kao zaobilazno rešenje, poželećete da pokrenete iskačući prozor iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tastaturi koristeći tabindex="0".

Za onemogućene okidače iskačućeg prikaza, možda ćete više voljeti data-bs-trigger="hover focus"da se iskačući prikaz prikaže kao neposredna vizualna povratna informacija vašim korisnicima jer možda neće očekivati ​​da će kliknuti na onemogućeni 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

Varijable

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

Upotreba

Omogućite iskačuće prikaze putem JavaScripta:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-bs-, kao u data-bs-animation="". Obavezno promijenite tip slučaja naziva opcije iz camelCase u kebab-case kada prenosite opcije preko atributa podataka. Na primjer, umjesto korištenja data-bs-customClass="beautifier", koristite data-bs-custom-class="beautifier".

Korištenje funkcije sapopperConfig

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

Metode

show

Otkriva iskakanje elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno prikazan (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora. Skočni prozori čiji su naslov i sadržaj nulte dužine nikada se ne prikazuju.

myPopover.show()

sakriti

Sakriva skočni prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio stvarno skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem iskačućeg prozora.

myPopover.hide()

preklopiti

Prebacuje iskačući prozor elementa. Vraća se pozivaocu prije nego što je iskačući dio zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem iskačućeg prozora.

myPopover.toggle()

dispose

Sakriva i uništava skočni prozor elementa (Uklanja pohranjene podatke na DOM elementu). Skočni prozori koji koriste delegiranje (koji se kreiraju pomoću opcije selector) ne mogu se pojedinačno uništiti na elementima okidača potomaka.

myPopover.dispose()

omogućiti

Daje mogućnost prikaza skočnog prikaza elementa. Popovers su podrazumevano omogućeni.

myPopover.enable()

onemogućiti

Uklanja mogućnost da se iskačući prozor elementa prikaže. Popover će se moći prikazati samo ako je ponovo omogućen.

myPopover.disable()

toggleEnabled

Prebacuje mogućnost da se skočni prozor elementa prikaže ili sakrije.

myPopover.toggleEnabled()

ažurirati

Ažurira poziciju iskačućeg elementa.

myPopover.update()

getInstance

Statička metoda koja vam omogućava da dobijete instancu iskačućih stranica koja je povezana sa DOM elementom

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

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete popover instancu povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

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

Događaji

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