پۆپۆڤەرز

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لە کاتی بەکارهێنانی پێوەکراوەکەی popover:

• پۆپۆڤەرەکان پشت بە کتێبخانەی لایەنی سێیەم پۆپەر دەبەستن بۆ جێگیرکردن. پێویستە پێش bootstrap.js popper.min.js دابنێیت یان bootstrap.bundle.min.js/ بەکاربهێنیت bootstrap.bundle.jsکە Popper لەخۆدەگرێت بۆ ئەوەی popovers کاربکات!
• Popovers پێویستیان بە پێوەکراوەکەی tooltip وەک وابەستەیەک هەیە.
• Popovers بە هۆکاری کاراییەوە بەشداریکردنە، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
• سفر-درێژی titleو contentبەهاکان هەرگیز پۆپۆڤەرێک نیشان نادەن.
• دیاری بکە container: 'body'بۆ ئەوەی کێشەی ڕەندەرکردن لە پێکهاتە ئاڵۆزترەکاندا ڕوونەدات (وەک گروپەکانی چوونەژوورەوەمان، گروپەکانی دوگمەکان و هتد).
• دەستپێکردنی پۆپۆڤەرەکان لەسەر توخمە شاراوەکان کار ناکات.
• پۆپۆڤەرەکان بۆ .disabledیان disabledتوخمەکان دەبێت لەسەر توخمێکی پێچراو دەستپێبکرێن.
• کاتێک لە لەنگەرەکانەوە دەستپێدەکرێت کە بەسەر چەندین هێڵدا دەپێچنەوە، پۆپۆڤەرەکان لە نێوان پانایی گشتی لەنگەرەکاندا لە ناوەڕاستدا دەبن. .text-nowrapلەسەر s ـەکەت بەکاربهێنە <a>بۆ ئەوەی لەم ڕەفتارە دوور بکەویتەوە.
• دەبێت پۆپۆڤەرەکان بشاردرێنەوە پێش ئەوەی توخمە هاوبەشەکانیان لە DOM لاببرێن.
• دەتوانرێت Popovers بەهۆی توخمێک لە ناو DOM ی سێبەردا دەستپێبکرێت.

بەردەوام بە لە خوێندنەوە بۆ ئەوەی بزانیت چۆن پۆپۆڤەرەکان کاردەکەن بە هەندێک نموونە.

نموونە: لە هەموو شوێنێک popovers چالاک بکە

یەکێک لە ڕێگاکانی دەستپێکردنی هەموو پۆپۆڤەرەکان لە لاپەڕەیەکدا ئەوەیە کە بەپێی data-bs-toggleتایبەتمەندیەکەیان هەڵبژێریت:

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

نموونە: بەکارهێنانی containerبژاردەکە

کاتێک هەندێک ستایلت لەسەر توخمێکی باوک هەیە کە دەستوەردان لە پۆپۆڤەرێک دەکەن، دەتەوێت تایبەتمەندییەک دیاری بکەیت بۆ containerئەوەی لەبری ئەوە HTML ی پۆپۆڤەرەکە لەناو ئەو توخمەدا دەربکەوێت.

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

نموونە

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

چوار ئاراستە

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو. ڕێنماییەکان لە کاتی بەکارهێنانی 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>

لە کلیکی داهاتوودا لە کارەکەت دوور بخەرەوە

تریگەر بەکاربهێنە focusبۆ ڕەتکردنەوەی پۆپۆڤەرەکان لەسەر کلیکی داهاتووی بەکارهێنەر لەسەر توخمێکی جیاواز لە توخمەکەی 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'
})

توخمە لەکارخراوەکان

ئەو توخمانەی کە disabledتایبەتمەندیەکەیان هەیە کارلێککار نین، واتە بەکارهێنەران ناتوانن پەنجەیان لەسەر دابنێن یان کلیکیان لەسەر بکەن بۆ دەستپێکردنی پۆپۆڤەر (یان ئامۆژگاری ئامراز). وەک چارەسەرێک، تۆ دەتەوێت پۆپۆڤەرەکە لە پێچەرێکەوە <div>یان <span>, بە شێوەیەکی ئایدیاڵ دروستکراوە بە بەکارهێنانی تەرکیزکردنی کیبۆرد tabindex="0".

بۆ دەستپێکەرەکانی پۆپۆڤەری لەکارکەوتوو، ڕەنگە پێت باشە data-bs-trigger="hover focus"کە پۆپۆڤەرەکە وەک فیدباکێکی بینراوی دەستبەجێ بۆ بەکارهێنەرانت دەربکەوێت چونکە لەوانەیە چاوەڕێی ئەوە نەکەن کلیک لەسەر توخمێکی لەکارخراو بکەن.

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

ساس

گۆڕاوەکان

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

بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-, وەک لە data-bs-animation="". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە camelCase بۆ kebab-case لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە لەبری بەکارهێنانی data-bs-customClass="beautifier", بەکاربهێنە data-bs-custom-class="beautifier".

بەکارهێنانی فەنکشن لەگەڵpopperConfig

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

شێوازەکان

نیشاندان

پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە ناونیشان و ناوەڕۆکیان هەردووکیان درێژی سفرە هەرگیز پیشان نادرێن.

myPopover.show()

شاردنەوە

پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.

myPopover.hide()

toggle بکە

پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.popoverیان hidden.bs.popoverڕووبدات). ئەمەش بە دەستپێکردنی "دەستی" پۆپۆڤەر دادەنرێت.

myPopover.toggle()

فڕێ بدە

پاپۆڤەری توخمێک دەشارێتەوە و لەناویان دەبات (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات). ئەو پۆپۆڤەرانەی کە نوێنەرایەتی بەکاردەهێنن (کە بە بەکارهێنانی بژاردەی دروست دەکرێن ) selectorناتوانرێت بە تاک لەسەر توخمە دەستپێکەرەکانی نەوە لەناوببرێن.

myPopover.dispose()

چالاک کردن

توانای پیشاندانی بە پۆپۆڤەری توخمێک دەدات. Popovers بە شێوازی پێشوەختە چالاک کراوە.

myPopover.enable()

ناچالاک کردن

توانای پیشاندانی پۆپۆڤەری توخمێک لا دەبات. popover تەنها لە حاڵەتێکدا دەتوانرێت پیشان بدرێت کە دووبارە چالاک بکرێتەوە.

myPopover.disable()

toggleEnabled کراوە

توانای پیشاندانی یان شاردنەوەی پۆپۆڤەری توخمێک دەگۆڕێت.

myPopover.toggleEnabled()

نوێکردنەوە

شوێنی پۆپۆڤەری توخمێک نوێ دەکاتەوە.

myPopover.update()

getInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی popover بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە

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

getOrCreateInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی popover بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا

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

ڕووداوەکان

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