پۆپۆڤەرز

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

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

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

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

نموونە

popovers چالاک بکە

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

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

دیمۆی ڕاستەوخۆ

ئێمە جاڤاسکڕێپت هاوشێوەی پارچەی سەرەوە بەکاردەهێنین بۆ ڕەندەری ئەم پۆپۆڤەرە ڕاستەوخۆیەی خوارەوە. ناونیشانەکان لە ڕێگەی دادەنرێت data-bs-titleو ناوەڕۆکی جەستە لە ڕێگەی 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>

چوار ئاراستە

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ. ڕێنماییەکان لە کاتی بەکارهێنانی Bootstrap لە RTLدا ئاوێنە دەکرێن. ڕێکبخە data-bs-placementبۆ گۆڕینی ئاراستەکە.

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

باوcontainer

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

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

دۆخێکی تر کە دەتەوێت تایبەتمەندییەکی ڕوون دابنێیت containerبریتین لە popovers لەناو دیالۆگێکی مۆداڵیدا , بۆ ئەوەی دڵنیا بیت لەوەی کە خودی popoverەکە بە مۆداڵەکەوە لکێنراوە. ئەمە بە تایبەتی گرنگە بۆ ئەو پۆپۆڤەرانەی کە توخمە کارلێککەرەکانیان تێدایە – دیالۆگەکانی مۆداڵی فۆکەس دەخاتە تەڵەوە، بۆیە مەگەر پۆپۆڤەر توخمێکی منداڵی مۆداڵی نەبێت، بەکارهێنەران ناتوانن فۆکەس بکەن یان ئەم توخمە کارلێککارانە چالاک بکەن.

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

پۆپۆڤەری تایبەت بەخۆت

دەتوانیت بە بەکارهێنانی گۆڕاوەکانی CSS دەرکەوتنی پۆپۆڤەرەکان بەپێی خواستی خۆت دابنێیت . ئێمە پۆلێکی تایبەتمان لەگەڵ data-bs-custom-class="custom-popover"دادەنێین بۆ مەودای دەرکەوتنی تایبەتمەندیمان و بەکاریدەهێنین بۆ سەرپێچی هەندێک لە گۆڕاوە ناوخۆییەکانی CSS.

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

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

تریگەر بەکاربهێنە focusبۆ ڕەتکردنەوەی پۆپۆڤەرەکان لەسەر کلیکی داهاتووی بەکارهێنەر لەسەر توخمێکی جیاواز لە توخمەکەی toggle.

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

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

ئەو توخمانەی کە 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>

CSS

گۆڕاوەکان

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS پەرەسەندووەکانی Bootstrap، ئێستا popovers گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن .popoverبۆ بەرزکردنەوەی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

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

گۆڕاوەکانی ساس

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

بەکارهێنان

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

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

بژاردەکان

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

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، titleبەهای کۆتایی دەبێت 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا دەتوانن بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

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

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

شێوازەکان

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

ڕووداوەکان

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