Popovers

Dubawa

Abubuwan da ya kamata ku sani lokacin amfani da plugin ɗin popover:

• Popovers sun dogara da ɗakin karatu na ɓangare na uku Popper don sakawa. Dole ne ku haɗa popper.min.js kafin bootstrap.js, ko amfani da bootstrap.bundle.min.jswanda ya ƙunshi Popper.
• Popovers suna buƙatar plugin ɗin popover azaman abin dogaro.
• Popovers suna shiga don dalilai na aiki, don haka dole ne ka fara su da kanka .
• Tsawon sifili titleda contentƙima ba za su taɓa nuna buguwa ba.
• Ƙayyade container: 'body'don guje wa yin matsaloli a cikin ƙarin hadaddun abubuwa (kamar ƙungiyoyin shigar da mu, ƙungiyoyin maɓalli, da sauransu).
• Haɓaka popovers akan abubuwan ɓoye ba zai yi aiki ba.
• Popovers don .disabledko disabledabubuwan dole ne a kunna su akan abin nadi.
• Lokacin da aka kunna shi daga anka waɗanda ke nannade cikin layi ɗaya, popovers za su kasance a tsakiya tsakanin faɗin anka gaba ɗaya. Yi amfani .text-nowrapda <a>s ɗin ku don guje wa wannan halin.
• Dole ne a ɓoye maɓuɓɓuka kafin a cire abubuwan da suka dace daga DOM.
• Ana iya haifar da popovers godiya ga wani abu a cikin inuwa DOM.

Ci gaba da karantawa don ganin yadda popovers ke aiki tare da wasu misalai.

Misalai

Kunna popovers

Kamar yadda aka ambata a sama, dole ne ku fara fara popovers kafin a iya amfani da su. Hanya ɗaya don fara duk popovers akan shafi shine zaɓi su ta yanayin su data-bs-toggle, kamar haka:

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

Live demo

Muna amfani da JavaScript mai kama da snippet na sama don yin popover mai zuwa. An saita taken ta data-bs-titlekuma an saita abun cikin jiki ta hanyar 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>

Hanyoyi hudu

Akwai zaɓuɓɓuka huɗu: sama, dama, ƙasa, da hagu. Ana nuna kwatance yayin amfani da Bootstrap a cikin RTL. Saita data-bs-placementdon canza alkibla.

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

Customcontainer

Lokacin da kake da wasu nau'ikan nau'ikan nau'ikan iyaye waɗanda ke tsoma baki tare da popover, za ku so ku saka al'ada containerta yadda HTML ɗin popover ta bayyana a cikin wannan kashi maimakon. Wannan ya zama ruwan dare a cikin tebur masu amsawa, ƙungiyoyin shigarwa, da makamantansu.

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

Wani yanayi inda zaku so saita al'ada bayyananne containershine popovers a cikin maganganun modal , don tabbatar da cewa popover kanta an haɗa shi da modal. Wannan yana da mahimmanci musamman ga popovers waɗanda ke ƙunshe da abubuwa masu mu'amala - maganganu na modal za su kama hankali, don haka sai dai idan popover ɗin ɗan ƙaramin ɗan ƙaramin abu ne, masu amfani ba za su iya mayar da hankali ko kunna waɗannan abubuwan mu'amala ba.

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

Popovers na al'ada

Kuna iya siffanta bayyanar popovers ta amfani da masu canji na CSS . Mun saita aji na al'ada tare data-bs-custom-class="custom-popover"da iyakacin kamannin mu na al'ada kuma muyi amfani da shi don ƙetare wasu masu canjin CSS na gida.

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

Kore a danna gaba

Yi amfani da focusfaɗakarwa don korar popovers akan danna gaba na mai amfani na wani nau'i na daban fiye da abin juyawa.

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

Abubuwan da aka kashe

Abubuwan da ke da disabledsifa ba su da ma'amala, ma'ana masu amfani ba za su iya yin shawagi ko danna su don jawo popover (ko kayan aiki ba). A matsayin madaidaicin aiki, zaku so kunna popover daga nannade <div>ko <span>, wanda aka fi dacewa da maballin madannai ta amfani da tabindex="0".

Don naƙasassun abubuwan faɗowa, kuna iya gwammace data-bs-trigger="hover focus"ta yadda popover ɗin ya bayyana azaman ra'ayin gani nan da nan ga masu amfani da ku saboda ƙila ba za su yi tsammanin danna kan wani guragu ba.

<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

Masu canji

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, popovers yanzu suna amfani da masu canjin CSS na gida .popoverdon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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 masu canji

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

Amfani

Kunna popovers ta JavaScript:

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

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Kamar na Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka tanada na gwajidata-bs-config wanda zai iya saita tsarin sassauƙan sassa azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Amfani da aiki tare dapopperConfig

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

Hanyoyin

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

Events

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