Popovers

Pārskats

Lietas, kas jāzina, izmantojot uznirstošo spraudni:

• Popovers pozicionēšanai izmanto trešās puses bibliotēku Popper . Lai uznirstošie elementi darbotos, pirms bootstrap.js jāiekļauj popper.min.js vai jāizmanto bootstrap.bundle.min.js/ bootstrap.bundle.jskas satur Popper!
• Uznirstošajiem ekrāniem kā atkarība ir nepieciešams rīka padoma spraudnis .
• Uznirstošie elementi ir izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
• Nulles garums titleun contentvērtības nekad neparādīs uznirstošo logu.
• Norādiet container: 'body', lai izvairītos no renderēšanas problēmām sarežģītākos komponentos (piemēram, mūsu ievades grupās, pogu grupās utt.).
• Uznirstošo logu aktivizēšana slēptajos elementos nedarbosies.
• Uznirstošie elementi .disabledvai disabledelementiem ir jāaktivizē iesaiņojuma elementā.
• Ja to aktivizē enkuri, kas apvij vairākas līnijas, uznirstošie elementi tiks centrēti starp enkuru kopējo platumu. Izmantojiet .text-nowrap, <a>lai izvairītos no šādas uzvedības.
• Uznirstošie elementi ir jāslēpj, pirms to atbilstošie elementi ir noņemti no DOM.
• Popovers var tikt aktivizēts, pateicoties elementam, kas atrodas ēnu DOM.

Turpiniet lasīt, lai redzētu, kā darbojas uznirstošie elementi, izmantojot dažus piemērus.

Piemērs: iespējot uznirstošos logus visur

Viens veids, kā inicializēt visus uznirstošos logus lapā, būtu atlasīt tos pēc to data-bs-toggleatribūta:

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

Piemērs: containeropcijas izmantošana

Ja vecā elementā ir daži stili, kas traucē uznirstošo logu, jūs vēlaties norādīt pielāgotu container, lai uznirstošā elementa HTML tiktu rādīts šajā elementā.

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

Piemērs

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

Četri virzieni

Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi. Norādes tiek atspoguļotas, izmantojot 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>

Noraidīt ar nākamo klikšķi

Izmantojiet focusaktivizētāju, lai noraidītu uznirstošos logus, kad lietotājs nākamreiz noklikšķina uz cita elementa, nevis uz pārslēgšanas elementa.

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

Atspējotie elementi

Elementi ar disabledatribūtu nav interaktīvi, tas nozīmē, ka lietotāji nevar virzīt kursoru vai noklikšķināt uz tiem, lai aktivizētu uznirstošo logu (vai rīka padomu). Kā risinājumu varat aktivizēt uznirstošo pavērsienu no iesaiņojuma <div>vai <span>ideālā gadījumā, ja tastatūras fokuss ir piemērots, izmantojot tabindex="0".

Atspējotiem uznirstošiem aktivizētājiem varat arī izvēlēties data-bs-trigger="hover focus", lai uznirstošais logs lietotājiem tiktu rādīts kā tūlītēja vizuāla atgriezeniskā saite, jo viņi, iespējams, negaidīs, ka noklikšķinās uz atspējota elementa.

<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

Mainīgie lielumi

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

Lietošana

Iespējot uznirstošos logus, izmantojot JavaScript:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-, tāpat kā data-bs-animation="". Nododot opcijas, izmantojot datu atribūtus, noteikti nomainiet opcijas nosaukuma reģistra veidu no camelCase uz kebab-case. Piemēram, tā vietā, lai izmantotu data-bs-customClass="beautifier", izmantojiet data-bs-custom-class="beautifier".

Izmantojot funkciju arpopperConfig

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

Metodes

parādīt

Atklāj elementa popover. Atgriežas pie zvanītāja, pirms faktiski ir parādīts uznirstošais logs (ti, pirms shown.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu. Uznirstošie elementi, kuru nosaukumam un saturam ir nulles garums, nekad netiek rādīti.

myPopover.show()

paslēpties

Paslēpj elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski paslēpts (ti, pirms hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

myPopover.hide()

pārslēgt

Pārslēdz elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.popovervai hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

myPopover.toggle()

atbrīvoties

Paslēpj un iznīcina elementa uznirstošo logu (noņem DOM elementā saglabātos datus). Uznirstošos logus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector) , nevar atsevišķi iznīcināt pēcnācēju trigera elementiem.

myPopover.dispose()

iespējot

Sniedz iespēju parādīt elementa uznirstošo logu. Uznirstošie elementi ir iespējoti pēc noklusējuma.

myPopover.enable()

atspējot

Noņem iespēju rādīt elementa uznirstošo logu. Uznirstošo logu varēs parādīt tikai tad, ja tas būs atkārtoti iespējots.

myPopover.disable()

pārslēgtIespējots

Pārslēdz iespēju rādīt vai paslēpt elementa uznirstošo logu.

myPopover.toggleEnabled()

Atjaunināt

Atjaunina elementa uznirstošā loga pozīciju.

myPopover.update()

getInstance

Statiskā metode, kas ļauj iegūt uznirstošo gadījumu, kas saistīts ar DOM elementu

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

getOrCreateInstance

Statiskā metode, kas ļauj iegūt uznirstošo gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts

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

Pasākumi

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