Popovers

Pregled

Stvari koje trebate znati kada koristite dodatak za popover:

• Popovers se oslanjaju na biblioteku treće strane Popper za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.jsili koristiti onaj bootstrap.bundle.min.jskoji sadrži Popper.
• Popovers zahtijevaju dodatak za popover kao ovisnost.
• Popovers su uključeni iz razloga performansi, tako da ih morate sami inicijalizirati .
• Nulta dužina titlei contentvrijednosti nikada neće prikazati skočni prozor.
• Odredite 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 prozori 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.

Primjeri

Omogući popove

Kao što je gore spomenuto, morate inicijalizirati popove prije nego što se mogu koristiti. Jedan od načina da se inicijaliziraju svi skočni prozori na stranici bio bi da ih odaberete prema njihovom data-bs-toggleatributu, na primjer:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demo uživo

Koristimo JavaScript sličan gore navedenom isječku za prikazivanje sljedećeg živog skočnog prikaza. Naslovi se postavljaju putem data-bs-title, a sadržaj tijela se postavlja putem data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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. Uputstva se preslikavaju kada koristite Bootstrap u RTL-u. Postavite data-bs-placementza promjenu smjera.

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

Customcontainer

Kada imate neke stilove na roditeljskom elementu koji ometaju iskačući prikaz, htjet ćete navesti prilagođeni containertako da se HTML iskačućeg elementa umjesto toga pojavljuje unutar tog elementa. Ovo je uobičajeno u responzivnim tabelama, ulaznim grupama i slično.

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

Još jedna situacija u kojoj ćete htjeti postaviti eksplicitno prilagođeno containerjesu iskačući prozori unutar modalnog dijaloga , kako biste bili sigurni da je sam iskačući prozor dodat modalnom. Ovo je posebno važno za iskačuće elemente koji sadrže interaktivne elemente – modalni dijalozi će uhvatiti fokus, tako da osim ako iskačući element nije podređeni element modalnog, korisnici neće moći fokusirati ili aktivirati ove interaktivne elemente.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Prilagođeni popovers

Možete prilagoditi izgled popovera koristeći CSS varijable . Postavljamo prilagođenu klasu sa data-bs-custom-class="custom-popover"za opseg našeg prilagođenog izgleda i koristimo je za nadjačavanje nekih lokalnih CSS varijabli.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Varijable

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, popovers sada koriste lokalne CSS varijable uključene .popoverza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass varijable

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Upotreba

Omogućite popovers putem JavaScripta:

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

Opcije

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može smjestiti jednostavnu konfiguraciju komponente kao JSON string. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka će nadjačati vrijednosti date na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Korištenje funkcije sapopperConfig

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

Metode

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Događaji

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