Popovers

Apžvalga

Ką reikia žinoti naudojant popover papildinį:

• Popovers pozicionuoti remiasi trečiosios šalies biblioteka Popper . Prieš bootstrap.js turite įtraukti popper.min.js arba naudoti bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper, kad iššokantys langai veiktų!
• Iššokantiesiems reikalingas patarimo įskiepis kaip priklausomybė.
• Iššokantys langai pasirenkami dėl našumo priežasčių, todėl turite juos inicijuoti patys .
• Nulinis ilgis titleir contentreikšmės niekada nerodys iššokimo.
• Nurodykite container: 'body', kad išvengtumėte atvaizdavimo problemų sudėtingesniuose komponentuose (pvz., įvesties grupėse, mygtukų grupėse ir kt.).
• Paslėptų elementų iššokančių langų suaktyvinimas neveiks.
• Elementų .disabledarba disabledelementų iššokimai turi būti suaktyvinti apvyniojimo elemente.
• Suaktyvinus iš inkarų, apvyniojančių kelias linijas, iššokantys langai bus sutelkti tarp bendro inkarų pločio. Naudokite .text-nowrapant savo <a>, kad išvengtumėte tokio elgesio.
• Iššokantys langai turi būti paslėpti prieš pašalinant atitinkamus elementus iš DOM.
• Iššokimas gali būti suaktyvintas dėl elemento šešėlinio DOM viduje.

Skaitykite toliau, kad sužinotumėte, kaip veikia iššokantys langai su kai kuriais pavyzdžiais.

Pavyzdys: įgalinkite iššokančius langus visur

Vienas iš būdų inicijuoti visus puslapio iššokančius langus būtų pasirinkti juos pagal data-bs-toggleatributą:

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

Pavyzdys: containerparinkties naudojimas

Kai pirminiame elemente yra tam tikrų stilių, kurie trukdo iššokimui, norėsite nurodyti tinkintą container, kad iššokančiojo elemento HTML būtų rodomas tame elemente.

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

Pavyzdys

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

Keturios kryptys

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje. Nurodymai rodomi naudojant „Bootstrap“ RTL.

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

Atsisakyti kitą kartą spustelėjus

Naudokite focusaktyviklį, kad atsisakytumėte iššokančių langų, kai vartotojas kitą kartą spustelėja kitą elementą nei perjungimo elementas.

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

Išjungti elementai

Elementai su disabledatributu nėra interaktyvūs, o tai reiškia, kad naudotojai negali jų užvesti arba spustelėti, kad suaktyvintų iššokantįjį langą (arba patarimą). Kaip išeitis, norėsite suaktyvinti iššokimą iš paketo <div>arba <span>, idealiai sufokusuoti klaviatūrą naudodami tabindex="0".

Išjungus iškylančiojo lango aktyviklius taip pat galite pageidauti data-bs-trigger="hover focus", kad iššokantis langas būtų rodomas kaip tiesioginis vaizdinis grįžtamasis ryšys jūsų vartotojams, nes jie gali nesitikėti spustelėti išjungto elemento.

<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

Kintamieji

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

Naudojimas

Įgalinti iššokančius langus naudojant „JavaScript“:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="". Perduodant parinktis per duomenų atributus, būtinai pakeiskite parinkties pavadinimo didžiosios ir mažosios raidės tipą iš camelCase į kebab-case. Pavyzdžiui, užuot naudoję data-bs-customClass="beautifier", naudokite data-bs-custom-class="beautifier".

Naudojant funkciją supopperConfig

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

Metodai

Rodyti

Atskleidžia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu. Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.

myPopover.show()

paslėpti

Slepia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.

myPopover.hide()

perjungti

Perjungia elemento iššokantįjį langą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų nebuvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.popoverarba hidden.bs.popoverįvykiui). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.

myPopover.toggle()

disponuoti

Slepia ir sunaikina elemento iššokantįjį ekraną (pašalina DOM elemente saugomus duomenis). Iššokančių langų, kuriuose naudojamas delegavimas (kurie sukuriami naudojant parinktį selector) , negalima atskirai sunaikinti palikuonių aktyviklio elementuose.

myPopover.dispose()

įjungti

Suteikia elemento popover galimybę būti rodomas. Iššokantys langai įjungti pagal numatytuosius nustatymus.

myPopover.enable()

išjungti

Pašalina galimybę rodyti elemento iššokantįjį langą. Iššokantis ekranas gali būti rodomas tik tada, kai jis bus įjungtas iš naujo.

myPopover.disable()

perjungtiĮjungta

Perjungia galimybę rodyti arba paslėpti elemento iššokantįjį langą.

myPopover.toggleEnabled()

atnaujinti

Atnaujina elemento iššokančiojo lango padėtį.

myPopover.update()

getInstance

Statinis metodas, leidžiantis gauti iššokantį egzempliorių, susietą su DOM elementu

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

getOrCreateInstance

Statinis metodas, leidžiantis gauti iššokantįjį egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas

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

Renginiai

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