Popovers

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna popover:

• Popovers gbarale ile-ikawe ẹgbẹ kẹta Popper fun ipo. O gbọdọ pẹlu popper.min.js ṣaaju bootstrap.js tabi lo bootstrap.bundle.min.js/ bootstrap.bundle.jseyiti o ni Popper ninu lati le ṣiṣẹ!
• Popovers nilo ohun itanna ọpa bi igbẹkẹle kan.
• Popovers ti yọkuro fun awọn idi iṣẹ ṣiṣe, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
• Gigun odo titleati contentawọn iye kii yoo ṣe afihan agbejade kan.
• Pato container: 'body'lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ).
• Nfa popovers lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
• Popovers fun .disabledtabi disablederoja gbọdọ wa ni jeki on a wrapper ano.
• Nigbati o ba fa lati awọn ìdákọró ti o fi ipari si awọn laini pupọ, awọn popovers yoo wa ni aarin laarin iwọn apapọ awọn ìdákọró. Lo .text-nowraplori rẹ <a>s lati yago fun yi ihuwasi.
• Popovers gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
• Popovers le ti wa ni jeki ọpẹ si ohun ano inu a ojiji DOM.

Jeki kika lati wo bi awọn popovers ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.

Apeere: Mu popovers ṣiṣẹ nibi gbogbo

Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-bs-toggleabuda wọn:

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

Apeere: Lilo containeraṣayan

Nigba ti o ba ni diẹ ninu awọn aza lori kan obi ano ti o dabaru pẹlu a popover, o yoo fẹ lati pato kan aṣa containerki HTML popover han laarin ti ano dipo.

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

Apeere

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

Awọn itọnisọna mẹrin

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati ti osi. Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni 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>

Yọọ kuro ni titẹ atẹle

Lo focusokunfa lati yọ awọn popovers kuro lori titẹ atẹle olumulo ti nkan ti o yatọ ju ano toggle.

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

Awọn eroja alaabo

Awọn eroja pẹlu disabledẹya kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le rababa tabi tẹ wọn lati ṣe okunfa agbejade (tabi ohun elo irinṣẹ). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa popover lati inu iwe-ipamọ <div>tabi <span>, ti a ṣe ni aifọwọyi-idojukọ keyboard nipa lilo tabindex="0".

Fun awọn okunfa popover alaabo, o tun le fẹ data-bs-trigger="hover focus"ki popover naa han bi esi wiwo lẹsẹkẹsẹ si awọn olumulo rẹ nitori wọn le ma nireti lati tẹ lori nkan alaabo kan.

<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

Awọn oniyipada

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

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati camelCase si kebab-case nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, dipo lilo data-bs-customClass="beautifier", lo data-bs-custom-class="beautifier".

Lilo iṣẹ pẹlupopperConfig

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

Awọn ọna

ifihan

Ṣe afihan agbejade ano kan. Pada si olupe ṣaaju ki agbejade ti han gangan (ie ṣaaju ki shown.bs.popoveriṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover. Popovers ti akọle ati akoonu mejeeji jẹ gigun odo ko han rara.

myPopover.show()

tọju

Ìbòmọlẹ ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti farapamọ gangan (ie ṣaaju ki hidden.bs.popoveriṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.

myPopover.hide()

yipada

Yipada ohun ano ká popover. Pada si olupe ṣaaju ki agbejade ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.popovertabi hidden.bs.popoveriṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa popover.

myPopover.toggle()

sọnù

Ìbòmọlẹ ati ki o run ohun ano ká popover (Yọ awọn ti o ti fipamọ data lori DOM ano). Popovers ti o lo aṣoju (eyi ti a ṣẹda nipa lilo aṣayan ) selectorko le ṣe iparun ni ẹyọkan lori awọn eroja ti o nfa ọmọ.

myPopover.dispose()

mu ṣiṣẹ

Yoo fun ohun ano ká popover ni agbara lati han. Popovers ti ṣiṣẹ nipasẹ aiyipada.

myPopover.enable()

mu ṣiṣẹ

Yọ awọn agbara fun ohun ano ká popover lati han. Agbejade naa yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.

myPopover.disable()

Ti ṣiṣẹ toggle

Yipada agbara fun agbejade eroja lati han tabi pamọ.

myPopover.toggleEnabled()

imudojuiwọn

Ṣe imudojuiwọn ipo agbejade eroja kan.

myPopover.update()

gbaInstance

Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ popover ti o ni nkan ṣe pẹlu nkan DOM kan

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

gbaOrCreateInstance

Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ popover ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti o ko ba ṣe ipilẹṣẹ

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

Awọn iṣẹlẹ

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