Popovers

Yleiskatsaus

Tietoja ponnahduslaajennusta käytettäessä:

• Popoverit luottavat kolmannen osapuolen Popper -kirjastoon paikannuksessa. Sinun on lisättävä popper.min.js ennen bootstrap.js, tai käytä sellaista, bootstrap.bundle.min.jsjoka sisältää Popperin.
• Ponnahdusikkunat vaativat popover-laajennuksen riippuvuutena.
• Ponnahdusikkunat ovat käytössä suorituskykysyistä, joten sinun on alustettava ne itse .
• Nollapituus titleja contentarvot eivät koskaan näytä ponnahdusikkunaa.
• Määritä container: 'body', jotta vältät hahmonnusongelmia monimutkaisemmissa osissa (kuten syöttöryhmämme, painikeryhmämme jne.).
• Ponnahdusikkunoiden käynnistäminen piilotetuissa elementeissä ei toimi.
• .disabledPonnahdusikkunat elementeille tai disabledelementeille on käynnistettävä kääreelementissä .
• Kun ponnahdusikkuna laukaistaan ​​ankkureista, jotka kietoutuvat useille viivoille, ne keskitetään ankkurien kokonaisleveyden väliin. Vältä tämä käyttäytyminen käyttämällä sitä .text-nowrap.<a>
• Ponnahdusikkunat on piilotettava ennen kuin niitä vastaavat elementit on poistettu DOM:sta.
• Ponnahdusikkunat voidaan laukaista varjo-DOM:n sisällä olevan elementin ansiosta.

Jatka lukemista nähdäksesi, kuinka ponnahdusikkunat toimivat joidenkin esimerkkien avulla.

Esimerkkejä

Ota ponnahdusikkunat käyttöön

Kuten edellä mainittiin, sinun on alustettava ponnahdusikkunat ennen kuin niitä voidaan käyttää. Yksi tapa alustaa kaikki sivun ponnahdusikkunat olisi valita ne niiden data-bs-togglemääritteen mukaan, kuten:

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

Live-demo

Käytämme yllä olevan katkelman kaltaista JavaScriptiä seuraavan live-ponnahdusikkunan näyttämiseen. Otsikot asetetaan kautta data-bs-titleja runkosisältö asetetaan kautta 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>

Neljä suuntaa

Käytettävissä on neljä vaihtoehtoa: ylhäältä, oikealta, alhaalta ja vasemmalta. Ohjeet peilataan käytettäessä Bootstrapia RTL:ssä. Aseta data-bs-placementmuuttamaan suuntaa.

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

Mukautettucontainer

Jos pääelementissä on tyylejä, jotka häiritsevät ponnahdusikkunaa, haluat määrittää mukautetun containerponnahdusikkunan HTML-koodin, joka näkyy sen sijaan kyseisessä elementissä. Tämä on yleistä responsiivisissa taulukoissa, syöttöryhmissä ja vastaavissa.

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

Toinen tilanne, jossa haluat määrittää nimenomaisen mukautuksen, containerovat ponnahdusikkunat modaalivalintaikkunassa varmistaaksesi, että itse ponnahdusikkuna on liitetty modaaliin. Tämä on erityisen tärkeää ponnahdusikkunoissa, jotka sisältävät interaktiivisia elementtejä – modaaliset valintaikkunat jäävät kiinni, joten ellei ponnahdusikkuna ole modaalin lapsielementti, käyttäjät eivät voi keskittyä tai aktivoida näitä interaktiivisia elementtejä.

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

Mukautetut ponnahdusikkunat

Voit mukauttaa ponnahdusikkunoiden ulkoasua CSS-muuttujien avulla . Asetamme mukautetun luokan data-bs-custom-class="custom-popover"mukautetun ulkoasun kattamiseen ja käytämme sitä ohittamaan joitain paikallisia CSS-muuttujia.

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

Hylkää seuraavalla klikkauksella

Käytä focusliipaisinta hylätäksesi ponnahdusikkunat, kun käyttäjä seuraavaan napsauttaa eri elementtiä kuin vaihtoelementtiä.

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

Poistetut elementit

Attribuutilla varustetut elementit disabledeivät ole vuorovaikutteisia, mikä tarkoittaa, että käyttäjät eivät voi viedä hiiren osoitinta tai napsauttaa niitä käynnistääkseen ponnahdusikkunan (tai työkaluvihjeen). Kiertokeinona sinun kannattaa käynnistää ponnahdusikkuna kääreestä <div>tai <span>, ihanteellisesti näppäimistöltä tarkennettavaksi käyttämällä tabindex="0".

Jos ponnahdusikkuna käynnistyy pois käytöstä, voit myös haluta data-bs-trigger="hover focus", että ponnahdusikkuna näkyy käyttäjillesi välittömänä visuaalisena palautteena, koska he eivät ehkä odota napsauttavansa käytöstä poistettua elementtiä.

<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

Muuttujat

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa ponnahdusikkunat käyttävät nyt paikallisia CSS-muuttujia .popovertehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

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

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

Käyttö

Ota ponnahdusikkunat käyttöön JavaScriptin kautta:

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Käytä toimintoa kanssapopperConfig

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

menetelmät

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

Tapahtumat

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