Popovers

Pārskats

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

• Popovers pozicionēšanai izmanto trešās puses bibliotēku Popper . Jums ir jāiekļauj popper.min.js pirms bootstrap.js, vai izmantojiet tādu, bootstrap.bundle.min.jskas satur Popper.
• Uznirstošajiem ekrāniem kā atkarība ir nepieciešams popover 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ēri

Iespējot uznirstošos logus

Kā minēts iepriekš, pirms uznirstošo logu izmantošanas ir jāinicializē. Viens veids, kā inicializēt visus uznirstošos logus lapā, būtu atlasīt tos pēc to data-bs-toggleatribūta, piemēram:

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

Demo tiešraidē

Mēs izmantojam JavaScript, kas ir līdzīgs iepriekš norādītajam fragmentam, lai renderētu šādu reāllaika uznirstošo logu. Virsraksti tiek iestatīti, izmantojot, data-bs-titleun pamatteksta saturs tiek iestatīts, izmantojot 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>

Četri virzieni

Ir pieejamas četras iespējas: augšējā, labā, apakšējā un kreisā. Norādes tiek atspoguļotas, izmantojot Bootstrap RTL. Iestatiet data-bs-placement, lai mainītu virzienu.

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

Pielāgotscontainer

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ā. Tas ir izplatīts adaptīvās tabulās, ievades grupās un tamlīdzīgi.

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

Vēl viena situācija, kurā vēlaties iestatīt skaidru pielāgošanu, ir uznirstošie elementi containermodālā dialoglodziņā , lai pārliecinātos, ka pats uznirstošais logs ir pievienots modālajam logam. Tas ir īpaši svarīgi uznirstošajiem logiem, kas satur interaktīvus elementus — modālie dialoglodziņi nofiksēs fokusu, tāpēc lietotāji nevarēs fokusēt vai aktivizēt šos interaktīvos elementus, ja vien uznirstošais logs nav modāla bērnelements.

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

Pielāgoti popovers

Varat pielāgot uznirstošo logu izskatu, izmantojot CSS mainīgos . Mēs iestatām pielāgotu klasi ar data-bs-custom-class="custom-popover"sava pielāgotā izskata darbības jomu un izmantojam to, lai ignorētu dažus vietējos CSS mainīgos.

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

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

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>

CSS

Mainīgie

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas, uznirstošie elementi tagad izmanto vietējos CSS mainīgos, .popoverlai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

  --#{$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 mainīgie

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

Lietošana

Iespējot uznirstošos logus, izmantojot JavaScript:

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

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Izmantojot funkciju arpopperConfig

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

Metodes

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

Pasākumi

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