Popovers

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo popover plugin:

• Popovers waxay ku tiirsan yihiin maktabadda xisbiga 3aad ee Popper meelaynta. Waa inaad ku dartaa popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper si ay popovers u shaqeeyaan!
• Popovers waxay u baahan yihiin plugin tip -ku-tiirsanaan ahaan.
• Popovers waxay u soo galeen sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
• Dhererka eber titleiyo contentqiyamku weligood ma muujin doonaan popover.
• Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
• Kicinta popovers ee walxaha qarsoon ma shaqayn doono.
• Popovers .disabledama disabledcuriyayaasha waa in lagu kiciyo curiyaha duubka ah.
• Marka uu ka kiciyo barroosinno isku duuban dhowr xariiq, popovers waxay dhexda u ahaan doonaan ballaca guud ee barroosinnada. Isticmaal s si .text-nowrapaad <a>uga fogaato dhaqankan.
• Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
• Popovers waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Sii wad akhri si aad u aragto sida popovers ula shaqeeyaan tusaalooyinka qaarkood.

Tusaale: Dari popovers meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-bs-togglesifadooda:

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

Tusaale: Isticmaalka containerikhtiyaarka

Markaad haysatid qaabab qaar oo ah walxaha waalidka ee farageliya popover, waxaad u baahan doontaa inaad qeexdo caado containersi HTML popover's uu uga dhex muuqdo qaybtaas.

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

Tusaale

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

Afar jiho

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha 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>

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers ee isticmaalaha gujinta xigta ee shay ka duwan curiyaha beddelka.

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

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay kor u qaadi karin ama aanay gujin karin si ay u kiciyaan popover (ama qalab). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso popover ka duubabka <div>ama <span>, sida habboon loo sameeyay kiiboodhka diiradda saaraya iyadoo la adeegsanayo tabindex="0".

Kiciyeyaasha popover naafada, waxa kale oo aad doorbidi kartaa data-bs-trigger="hover focus"si popover-ku ugu muuqdo jawaab celin muuqaal degdeg ah isticmaalayaashaada maadaama laga yaabo in aanay filanayn inay gujiyaan shay naafada ah.

<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

Kala duwanaansho

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

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-animation="". Hubi inaad ka beddesho nooca kiiska ee magaca ikhtiyaarka ah ee geela una beddelo kiis kebab marka aad doorashooyinka ku gudbinayso sifooyinka xogta. Tusaale ahaan, halkii aad isticmaali lahayd data-bs-customClass="beautifier", isticmaal data-bs-custom-class="beautifier".

Isticmaalka shaqada lehpopperConfig

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

Hababka

show

Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (ie ka hor intaanay shown.bs.popoverdhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover. Popovers oo cinwaankoodu iyo nuxurkooduba yahay eber-dherer weligood lama soo bandhigin.

myPopover.show()

qari

Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan la qarinin popover-ka (tusaale ka horhidden.bs.popover dhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover.

myPopover.hide()

leexleex

Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popoverama hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgalinayaa "buuga" kicinta popover.

myPopover.toggle()

tuurid

Wuxuu qariyaa oo baabi'iyaa boodboodka cunsurka (Waxay meesha ka saartaa xogta kaydsan ee cunsurka DOM). Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

myPopover.dispose()

awood

Siinaya popover element awood lagu muujiyo. Popovers waa la dajiyay si toos ah.

myPopover.enable()

hawl gab

Waxay meesha ka saartaa awoodda soo-bandhigidda curiyaha si loo muujiyo. Booqashada ayaa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

myPopover.disable()

Daloola

Waxay beddeshaa awoodda boodboodka curiyaha si loo muujiyo ama loo qariyo.

myPopover.toggleEnabled()

cusbooneysiin

Waxay cusboonaysiisaa booska boodboodka curiyaha.

myPopover.update()

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha popover ee la xidhiidha curiyaha DOM

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

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha popover ee la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin

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

Dhacdooyinka

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