Popovers

Yleiskatsaus

Tietoja ponnahduslaajennusta käytettäessä:

• Popoverit luottavat paikannukseen kolmannen osapuolen kirjaston Popperiin . Sinun tulee lisätä popper.min.js ennen bootstrap.js:ää tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popperin, jotta ponnahdusikkunat toimivat!
• Ponnahdusikkunat vaativat työkaluvihje-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.

Esimerkki: Ota ponnahdusikkunat käyttöön kaikkialla

Yksi tapa alustaa kaikki ponnahdusikkunat sivulla on valita ne niiden data-bs-togglemääritteen perusteella:

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

Esimerkki: containervaihtoehdon käyttäminen

Jos pääelementissä on tyylejä, jotka häiritsevät ponnahdusikkunaa, haluat määrittää mukautetun containerponnahdusikkunan HTML-koodin, joka näkyy sen sijaan kyseisessä elementissä.

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

Esimerkki

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

Neljä suuntaa

Käytettävissä on neljä vaihtoehtoa: ylä-, oikea-, ala- ja vasemmalle tasattuna. Ohjeet peilataan käytettäessä Bootstrapia RTL:ssä.

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

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

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>

Sass

Muuttujat

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

Käyttö

Ota ponnahdusikkunat käyttöön JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-animation="". Muista vaihtaa vaihtoehdon nimen tapaustyyppi camelCase-muotoon kebab-case, kun välität valinnat tietomääritteiden kautta. Käytä esimerkiksi sen sijaan, että data-bs-customClass="beautifier"käytät data-bs-custom-class="beautifier".

Käytä toimintoa kanssapopperConfig

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

menetelmät

näytä

Paljastaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näytetty (eli ennen shown.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna. Ponnahdusikkunoita, joiden otsikko ja sisältö ovat nollapituisia, ei koskaan näytetä.

myPopover.show()

piilottaa

Piilottaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella piilotettu (eli ennen hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

myPopover.hide()

vaihtaa

Vaihtaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näkynyt tai piilotettu (ts. ennen shown.bs.popovertai hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

myPopover.toggle()

hävittää

Piilottaa ja tuhoaa elementin ponnahdusikkunan (poistaa DOM-elementtiin tallennetut tiedot). Ponnahdusikkunoita, jotka käyttävät delegointia (jotka luodaan vaihtoehdolla ) selector, ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.

myPopover.dispose()

ota käyttöön

Antaa elementin ponnahdusikkunalle mahdollisuuden näkyä. Ponnahdusikkunat ovat oletuksena käytössä.

myPopover.enable()

Poista käytöstä

Poistaa mahdollisuuden näyttää elementin ponnahdusikkuna. Ponnahdusikkuna voidaan näyttää vain, jos se otetaan uudelleen käyttöön.

myPopover.disable()

toggleEnabled

Vaihtaa elementin ponnahdusikkunan näyttämisen tai piilotuksen.

myPopover.toggleEnabled()

päivittää

Päivittää elementin ponnahdusikkunan sijainnin.

myPopover.update()

getInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän popover-instanssin

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

getOrCreateInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän popover-esiintymän tai luoda uuden, jos sitä ei alustettu

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

Tapahtumat

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