Popovers

Pregled

Stvari koje treba znati kada koristite popover dodatak:

• Popoveri se za pozicioniranje oslanjaju na biblioteku treće strane Popper . Morate uključiti popper.min.js prije bootstrap.jsili koristiti onaj bootstrap.bundle.min.jskoji sadrži Popper.
• Popoveri zahtijevaju popover dodatak kao ovisnost.
• Popoveri su opt-in zbog performansi, pa ih morate sami pokrenuti .
• Nulta duljina titleicontent vrijednosti nikada neće prikazati skočni prikaz.
• Naveditecontainer: 'body' kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.).
• Pokretanje skočnih prozora na skrivenim elementima neće raditi.
• Popover za .disabledilidisabled moraju se pokrenuti na elementu omotača.
• Kada se pokreću iz sidrišta koja se prelamaju preko više linija, skočni prozori bit će centrirani između ukupne širine sidrišta. Koristite .text-nowrapna svom <a>s kako biste izbjegli ovakvo ponašanje.
• Skočni prozori moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
• Popoveri se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.

Nastavite čitati da vidite kako skočni prozori funkcioniraju s nekim primjerima.

Primjeri

Omogući skočne prozore

Kao što je gore spomenuto, morate pokrenuti skočne prozore prije nego što se mogu koristiti. Jedan od načina da inicijalizirate sve skočne prozore na stranici bio bi da ih odaberete po data-bs-toggleatributu, ovako:

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

Demo uživo

Koristimo JavaScript sličan gornjem isječku za renderiranje sljedećeg skočnog prikaza uživo. 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 smjera

Dostupne su četiri opcije: gore, desno, dolje i lijevo. Upute 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>

Prilagođencontainer

Kada imate neke stilove na nadređenom elementu koji ometaju skočni prozor, trebali biste navesti prilagođeni containertako da se HTML skočnog prozora pojavljuje unutar tog elementa. To je uobičajeno u responzivnim tablicama, grupama unosa i slično.

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

Još jedna situacija u kojoj ćete htjeti postaviti eksplicitni običaj containersu skočni prozori unutar modalnog dijaloga , kako biste bili sigurni da je sam skočni prozor pridodan modalu. Ovo je osobito važno za skočne prozore koji sadrže interaktivne elemente – modalni dijalozi će zadržati fokus, pa osim ako skočni prozor nije podređeni element modala, korisnici neće moći fokusirati ili aktivirati te interaktivne elemente.

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

Prilagođeni popover

Izgled skočnih prozora možete prilagoditi pomoću CSS varijabli . Postavljamo prilagođenu klasu 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>

Odbaci pri sljedećem kliku

Upotrijebite focusokidač za odbacivanje skočnih prozora pri sljedećem korisnikovom kliku na element različit od preklopnog elementa.

<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 lebdjeti pokazivačem ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis). Kao zaobilazno rješenje, htjet ćete pokrenuti skočni prozor iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tipkovnici, pomoću tabindex="0".

Za onemogućene okidače skočnog prozora možda biste radije željeli data-bs-trigger="hover focus"da se skočni prozor pojavi 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 Bootstrapovog pristupa CSS varijablama koji se razvija, popovi sada koriste lokalne CSS varijable .popoverza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

  --#{$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;

Korištenje

Omogući skočne prozore putem JavaScripta:

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

Mogućnosti

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 vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije 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 sadržavati jednostavnu konfiguraciju komponente kao JSON niz. 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 nadjačat će vrijednosti dane 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...
})