Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

Popovers

Dokumentaatio ja esimerkkejä Bootstrap-ponnahdusikkunoiden, kuten iOS:n, lisäämisestä mihin tahansa sivustosi elementtiin.

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.
Oletuksena tämä komponentti käyttää sisäänrakennettua sisällönpuhdistusohjelmaa, joka poistaa kaikki HTML-elementit, joita ei ole erikseen sallittu. Katso lisätietoja JavaScript-dokumentaation desinfiointiaineosiosta .
Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

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

Kun 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ä seuraavaksi napsauttaa eri elementtiä kuin vaihtoelementtiä.

Erityinen merkintä vaaditaan hylkäämiseen seuraavan napsautuksen yhteydessä

Jotta selain- ja alustojen välinen toiminta onnistuisi oikein, sinun on käytettävä tunnistetta <a>tagin sijaan<button> , ja sinun on myös sisällytettävä tabindexattribuutti.

<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 interaktiivisia, 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ön tarkentamisesta 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)

Ponnahdusikkunoiden saaminen toimimaan näppäimistön ja aputekniikan käyttäjille

Jotta näppäimistön käyttäjät voivat aktivoida ponnahdusikkunasi, sinun tulee lisätä ne vain sellaisiin HTML-elementteihin, jotka ovat perinteisesti kohdistettavissa näppäimistöön ja ovat interaktiivisia (kuten linkit tai lomakeohjaimet). Vaikka mielivaltaiset HTML-elementit (kuten <span>s) voidaan tehdä tarkennettavissa lisäämällä tabindex="0"attribuutti, tämä lisää mahdollisesti ärsyttäviä ja hämmentäviä sarkaimia ei-interaktiivisiin elementteihin näppäimistön käyttäjille, ja useimmat aputekniikat eivät tällä hetkellä ilmoita ponnahdusikkunan sisältöä tässä tilanteessa. . Älä myöskään luota siihen hover, että se on vain ponnahdusikkunoiden laukaisu, koska tämä tekee niistä mahdotonta laukaista näppäimistön käyttäjille.

Vaikka voit lisätä monipuolista, jäsenneltyä HTML-koodia ponnahdusikkunoihin tällä htmlvaihtoehdolla, suosittelemme, että vältät liiallisen sisällön lisäämisen. Ponnahdusikkunat toimivat tällä hetkellä siten, että kun ne näytetään, niiden sisältö on sidottu trigger-elementtiin aria-describedbymääritteellä. Tämän seurauksena koko popoverin sisältö julkistetaan aputekniikan käyttäjille yhtenä pitkänä, keskeytymättömänä streamina.

Lisäksi, vaikka ponnahdusikkunaan on mahdollista sisällyttää myös interaktiivisia ohjaimia (kuten lomakeelementtejä tai linkkejä) (lisäämällä nämä elementit allowListsallittujen attribuuttien ja tunnisteiden joukkoon), huomaa, että tällä hetkellä ponnahdusikkuna ei hallitse näppäimistön kohdistusjärjestystä. Kun näppäimistön käyttäjä avaa ponnahdusikkunan, kohdistus pysyy liipaisuelementissä, ja koska ponnahdusikkuna ei yleensä seuraa välittömästi liipaisinta dokumentin rakenteessa, ei ole takeita siitä, että eteenpäin/painaminenTABsiirtää näppäimistön käyttäjän itse ponnahdusikkunaan. Lyhyesti sanottuna, pelkkä interaktiivisten ohjainten lisääminen ponnahdusikkunaan tekee näistä säätimistä todennäköisesti saavuttamattomia/käyttökelvottomiksi näppäimistön käyttäjille ja aputekniikoiden käyttäjille, tai ainakin muodostaa epäloogisen yleisen tarkennusjärjestyksen. Harkitse näissä tapauksissa modaalisen valintaikkunan käyttöä.

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

Huomaa, että turvallisuussyistä sanitize, sanitizeFn, ja allowListvalintoja ei voida toimittaa dataattribuuttien avulla.
Nimi Tyyppi Oletus Kuvaus
animation boolean true Käytä ponnahdusikkunaan CSS-häivytystä
container merkkijono | elementti | väärä false

Liittää ponnahdusikkunan tiettyyn elementtiin. Esimerkki: container: 'body'. Tämä vaihtoehto on erityisen hyödyllinen, koska sen avulla voit sijoittaa ponnahdusikkunan asiakirjan virtaan lähelle liipaisuelementtiä - mikä estää ponnahdusikkunaa kellumasta pois laukaisuelementistä ikkunan koon muuttamisen aikana.

content merkkijono | elementti | toiminto ''

Sisällön oletusarvo, jos data-bs-contentattribuuttia ei ole.

Jos funktio on annettu, sitä kutsutaan ja sen thisviite on asetettu elementille, johon ponnahdusikkuna on liitetty.

delay numero | esine 0

Ponnahdusikkunan näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista laukaisutyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { "show": 500, "hide": 100 }

html boolean false Lisää HTML ponnahdusikkunaan. Jos epätosi, innerTextominaisuutta käytetään sisällön lisäämiseen DOM:iin. Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä.
placement merkkijono | toiminto 'right'

Ponnahdusikkunan sijoittaminen - auto | alkuun | pohja | vasemmalle | oikein.
Kun autoon määritetty, se suuntaa ponnahdusikkunan dynaamisesti uudelleen.

Kun funktiota käytetään sijoittelun määrittämiseen, sitä kutsutaan popover DOM-solmulla ensimmäisenä argumenttina ja liipaisuelementin DOM-solmun toisena argumenttina. Konteksti thisasetetaan popover-instanssiin.

selector merkkijono | väärä false Jos valitsin on käytettävissä, ponnahdusikkunaobjektit delegoidaan määritetyille kohteille. Käytännössä tätä käytetään mahdollistamaan ponnahdusikkunoiden lisääminen dynaamiseen HTML-sisältöön. Katso tämä ja informatiivinen esimerkki .
template merkkijono '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Ponnahdusikkunaa luotaessa käytettävä perus-HTML.

Popover's titleruiskutetaan .popover-header.

Popover's contentruiskutetaan .popover-body.

.popover-arrowtulee popoverin nuoli.

Uloimmalla kääreelementillä tulee olla .popoverluokka.

title merkkijono | elementti | toiminto ''

Otsikon oletusarvo, jos titleattribuuttia ei ole.

Jos funktio on annettu, sitä kutsutaan ja sen thisviite on asetettu elementille, johon ponnahdusikkuna on liitetty.

trigger merkkijono 'click' Kuinka ponnahdusikkuna käynnistyy - napsauta | leijua | keskittyä | manuaalinen. Voit läpäistä useita laukaisimia; erota ne välilyönnillä. manualei voida yhdistää mihinkään muuhun laukaisuun.
fallbackPlacements joukko ['top', 'right', 'bottom', 'left'] Määritä varasijoittelut tarjoamalla luettelo sijoitteluista taulukossa (etujärjestyksen mukaan). Lisätietoja on Popperin käyttäytymisdokumenteissa
boundary merkkijono | elementti 'clippingParents' Ponnahdusikkunan ylivuotorajoitusraja (koskee vain Popperin preventOverflow-muuttajaa). Oletuksena se hyväksyy 'clippingParents'ja voi hyväksyä HTMLElement-viittauksen (vain JavaScriptin kautta). Lisätietoja on Popperin detectOverflow -dokumenteissa .
customClass merkkijono | toiminto ''

Lisää luokat ponnahdusikkunaan, kun se näytetään. Huomaa, että nämä luokat lisätään mallissa määritettyjen luokkien lisäksi. Voit lisätä useita luokkia erottamalla ne välilyönneillä: 'class-1 class-2'.

Voit myös välittää funktion, jonka pitäisi palauttaa yksi merkkijono, joka sisältää muita luokkien nimiä.

sanitize boolean true Ota desinfiointi käyttöön tai poista se käytöstä. Jos aktivoitu 'template', 'content'ja 'title'vaihtoehdot desinfioidaan. Katso desinfiointiosio JavaScript-dokumentaatiossamme .
allowList esine Oletusarvo Objekti, joka sisältää sallitut attribuutit ja tunnisteet
sanitizeFn nolla | toiminto null Täällä voit toimittaa oman desinfiointitoiminnon. Tästä voi olla hyötyä, jos haluat käyttää desinfiointiin erityistä kirjastoa.
offset joukko | merkkijono | toiminto [0, 8]

Ponnahdusikkunan siirtymä suhteessa kohteeseen. Voit välittää tietomääritteissä merkkijonon pilkuilla erotetuilla arvoilla, kuten:data-bs-offset="10,20"

Kun funktiota käytetään määrittämään siirtymä, sitä kutsutaan objektilla, joka sisältää ensimmäisenä argumenttina popperin sijoittelun, viitteen ja popper rects. Liipaisuelementin DOM-solmu välitetään toisena argumenttina. Funktion on palautettava taulukko, jossa on kaksi numeroa: .[skidding, distance]

Lisätietoja on Popperin offset-dokumenteissa .

popperConfig nolla | esine | toiminto null

Jos haluat muuttaa Bootstrapin Popperin oletusasetuksia, katso Popperin asetukset .

Kun funktiota käytetään Popper-kokoonpanon luomiseen, sitä kutsutaan objektilla, joka sisältää Bootstrapin oletusarvoisen Popper-kokoonpanon. Se auttaa sinua käyttämään ja yhdistämään oletusasetuksia omaan kokoonpanoosi. Toiminnon on palautettava Popperin määritysobjekti.

Tietoattribuutit yksittäisille ponnahdusikkunoille

Vaihtoehtoisesti yksittäisten ponnahdusikkunoiden asetukset voidaan määrittää käyttämällä dataattribuutteja, kuten edellä on selitetty.

Käytä toimintoa kanssapopperConfig

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

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

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

Tapahtumatyyppi Kuvaus
show.bs.popover Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
näytetään.bs.popover Tämä tapahtuma käynnistyy, kun ponnahdusikkuna on tehty käyttäjän näkyväksi (odottaa CSS-siirtymien valmistumista).
hide.bs.popover Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu.bs.popover Tämä tapahtuma käynnistyy, kun ponnahdusikkuna on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).
inserted.bs.popover Tämä tapahtuma käynnistyy show.bs.popovertapahtuman jälkeen, kun popover-malli on lisätty DOM:iin.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})