Popoverji

Pregled

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

• Popovers se za pozicioniranje zanašajo na knjižnico tretje osebe Popper . Vključiti morate popper.min.js pred bootstrap.jsali uporabiti tisto, bootstrap.bundle.min.jski vsebuje Popper.
• Popoveri zahtevajo vtičnik popover 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 nekaterimi primeri.

Primeri

Omogoči popoverje

Kot je omenjeno zgoraj, morate inicializirati pojavna okna, preden jih lahko uporabite. Eden od načinov inicializacije vseh pojavnih oken na strani bi bil, da jih izberete po njihovem data-bs-toggleatributu, takole:

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

Demo v živo

Uporabljamo JavaScript, podoben zgornjemu izrezku, da upodabljamo naslednji pojavni prikaz v živo. Naslovi so nastavljeni prek data-bs-title, vsebina telesa pa prek 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>

Štiri smeri

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo. Pri uporabi Bootstrap v RTL so navodila zrcaljena. Nastavite data-bs-placementza spremembo smeri.

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

Po mericontainer

Ko imate na nadrejenem elementu nekaj slogov, ki motijo ​​pojavni pojav, boste želeli določiti po meri container, tako da se bo HTML pojavnega elementa namesto tega pojavil znotraj tega elementa. To je pogosto v odzivnih tabelah, vnosnih skupinah ipd.

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

Druga situacija, ko boste želeli nastaviti eksplicitno meritev, so pojavni elementi znotraj modalnega pogovornega okna , da zagotovite, da je sam containerpojavni prikaz pripet modalu . To je še posebej pomembno za pojavna okna, ki vsebujejo interaktivne elemente – modalna pogovorna okna bodo ujela fokus, tako da uporabniki ne bodo mogli fokusirati ali aktivirati teh interaktivnih elementov, razen če je pojavni element podrejeni element modala.

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

Popovi po meri

Videz pojavnih oken lahko prilagodite s spremenljivkami CSS . Nastavimo razred po meri data-bs-custom-class="custom-popover"za obseg našega videza po meri in ga uporabimo za preglasitev nekaterih lokalnih spremenljivk CSS.

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

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

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 pojavnih sprožilcih boste morda raje izbrali data-bs-trigger="hover focus", da se pojavni pojav uporabnikom prikaže kot takojšnja vizualna povratna informacija, 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>

CSS

Spremenljivke

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS, popoverji zdaj uporabljajo lokalne spremenljivke CSS .popoverza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

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

Uporaba

Omogoči pojavna okna prek JavaScripta:

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

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Uporaba funkcije zpopperConfig

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

Dogodki

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