Popovers

Apžvalga

Ką reikia žinoti naudojant popover papildinį:

• Popovers pozicionuojant remiasi trečiosios šalies biblioteka Popper . Turite įtraukti popper.min.js prieš bootstrap.js, arba naudoti tą bootstrap.bundle.min.js, kuriame yra Popper.
• Iššokantiesiems reikalingas iššokančiojo įskiepio kaip priklausomybės.
• 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.

Pavyzdžiai

Įgalinti iššokančius langus

Kaip minėta pirmiau, prieš naudodami iššokančius langus turite inicijuoti. Vienas iš būdų inicijuoti visus puslapio iššokančius langus būtų pasirinkti juos pagal data-bs-toggleatributą, pvz.:

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

Tiesioginė demonstracija

Naudojame „JavaScript“, panašų į anksčiau pateiktą fragmentą, kad pateiktume šį tiesioginį iššokantįjį vaizdą. Pavadinimai nustatomi per, data-bs-titleo turinio turinys – per 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>

Keturios kryptys

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje. Nurodymai rodomi naudojant „Bootstrap“ RTL. Nustatykite data-bs-placementkeisti kryptį.

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

Pasirinktiniscontainer

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. Tai įprasta reaguojančiose lentelėse, įvesties grupėse ir pan.

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

Kita situacija, kai norite nustatyti aiškų containertinkinimą, yra iššokantys langai modaliniame dialogo lange , siekiant užtikrinti, kad pats iššokantis langas būtų pridėtas prie modalo. Tai ypač svarbu iššokančiiesiems langams, kuriuose yra interaktyvių elementų – modaliniai dialogai sulaiko dėmesį, taigi, nebent iššokantis langas yra antrinis modalo elementas, vartotojai negalės sufokusuoti arba suaktyvinti šių interaktyvių elementų.

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

Individualūs iššokantys langai

Galite tinkinti iššokančių langų išvaizdą naudodami CSS kintamuosius . Mes nustatome tinkintą klasę, data-bs-custom-class="custom-popover"kad apimtų mūsų tinkintą išvaizdą, ir naudojame ją kai kuriems vietiniams CSS kintamiesiems nepaisyti.

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

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

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>

CSS

Kintamieji

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, iššokantieji dabar naudoja vietinius CSS kintamuosius, .popoverkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

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

Naudojimas

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

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

Galimybės

Kadangi parinktis galima perduoti naudojant duomenų atributus arba „JavaScript“, galite pridėti parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="{value}". Perduodant parinktis per duomenų atributus , būtinai pakeiskite parinkties pavadinimo didžiosios raidės tipą iš „ camelCase “ į „ kebab-case “. Pavyzdžiui, naudokite data-bs-custom-class="beautifier"vietoj data-bs-customClass="beautifier".

Nuo 5.2.0 versijos „Bootstrap“ visi komponentai palaiko eksperimentinį rezervuotų duomenų atributą data-bs-config, kuriame galima laikyti paprastą komponento konfigūraciją kaip JSON eilutę. Kai elementas turi data-bs-config='{"delay":0, "title":123}'ir data-bs-title="456"atributus, galutinė titlereikšmė bus 456ir atskiri duomenų atributai nepaisys reikšmių, pateiktų data-bs-config. Be to, esamuose duomenų atributuose gali būti JSON reikšmės, pvz ., data-bs-delay='{"show":0,"hide":150}'.

Naudojant funkciją supopperConfig

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

Metodai

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

Renginiai

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