پاپورز

اوسر

Popover پلگ ان کي استعمال ڪرڻ وقت ڄاڻڻ لاء شيون:

• Popovers پوزيشن لاء 3rd پارٽي لائبريري Popper تي ڀروسو . توهان کي bootstrap.js کان اڳ popper.min.js شامل ڪرڻ گهرجي يا استعمال ڪرڻ bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper شامل آهي popovers ڪم ڪرڻ لاءِ!
• Popovers هڪ انحصار جي طور تي ٽول ٽائپ پلگ ان جي ضرورت آهي.
• Popovers ڪارڪردگي سببن لاء آپٽ-ان آهن، تنهنڪري توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
• زيرو ڊگھائي title۽ contentقدر ڪڏهن به پاپ اوور نه ڏيکاريندا.
• container: 'body'وڌيڪ پيچيده اجزاء (جهڙوڪ اسان جي ان پٽ گروپن، بٽڻ گروپن، وغيره) ۾ رينجرنگ مسئلن کان بچڻ لاء وضاحت ڪريو .
• لڪيل عناصر تي پاپ اوور کي ڇڪڻ ڪم نه ڪندو.
• .disabledيا عنصرن لاءِ پوپ اوور disabledلازمي طور تي چاڙهيو وڃي ٿو چادر واري عنصر تي.
• جڏهن اينڪرز مان شروع ڪيو ويو آهي جيڪي ڪيترن ئي لائينن ۾ لپي ويندا آهن، پاپ اوور لنگر جي مجموعي چوٽي جي وچ ۾ مرڪز هوندا. هن رويي کان بچڻ لاء .text-nowrapتوهان جي ايس تي استعمال ڪريو .<a>
• Popovers کي لڪايو وڃي ان کان اڳ جو انهن جي لاڳاپيل عناصر کي DOM مان هٽايو ويو آهي.
• پاڇو 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>

چار طرفا

چار آپشن موجود آھن: مٿي، ساڄي، ھيٺ، ۽ کاٻي سان ترتيب ڏنل. RTL ۾ Bootstrap استعمال ڪرڻ وقت ھدايتون نظر اچن ٿيون.

<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ٽوگل عنصر کان مختلف عنصر جي صارف جي ايندڙ ڪلڪ تي پاپ اوور کي رد ڪرڻ لاءِ ٽرگر استعمال ڪريو.

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

استعمال

جاوا اسڪرپٽ ذريعي پاپ اوور کي فعال ڪريو:

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

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-animation="". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت ڪيبل ڪيس کان ڪيبل ڪيس ۾ اختيار جي نالي جي ڪيس جي قسم کي تبديل ڪرڻ جي پڪ ڪريو. مثال طور، استعمال ڪرڻ بدران 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اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ. Popovers جن جو عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.

myPopover.show()

لڪائڻ

هڪ عنصر جي پاپ اوور کي لڪائيندو آهي. پوپ اوور اصل ۾ لڪايو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . hidden.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.

myPopover.hide()

ٽوگل ڪرڻ

هڪ عنصر جي پاپ اوور کي ٽوگل ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو يا لڪايو ويو (يعني واقعي يا واقعو ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽ.shown.bs.popoverhidden.bs.popover

myPopover.toggle()

نيڪال ڪرڻ

هڪ عنصر جي پاپ اوور کي لڪايو ۽ تباهه ڪري ٿو (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو). پاپورز جيڪي وفد استعمال ڪندا آهن (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selectorانفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.

myPopover.dispose()

چالو ڪرڻ

هڪ عنصر جي پاپ اوور کي ڏيکاريو وڃڻ جي صلاحيت ڏئي ٿي. Popovers ڊفالٽ طور تي فعال آهن.

myPopover.enable()

غير فعال ڪرڻ

هڪ عنصر جي پاپ اوور کي ڏيکارڻ جي صلاحيت کي هٽائي ٿو. پاپ اوور صرف ان صورت ۾ ڏيکاريو ويندو جڏهن ان کي ٻيهر فعال ڪيو ويندو.

myPopover.disable()

toggle فعال

هڪ عنصر جي پاپ اوور کي ڏيکارڻ يا لڪائڻ جي صلاحيت کي ٽوگل ڪري ٿو.

myPopover.toggleEnabled()

تازه ڪاري

هڪ عنصر جي پاپ اوور جي پوزيشن کي اپڊيٽ ڪري ٿو.

myPopover.update()

getInstance

جامد طريقو جيڪو توهان کي حاصل ڪرڻ جي اجازت ڏئي ٿو پاپ اوور مثال DOM عنصر سان لاڳاپيل

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

getOrCreateInstance

جامد طريقو جيڪو توهان کي حاصل ڪرڻ جي اجازت ڏئي ٿو پاپ اوور مثال هڪ 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...
})