پاپورز

جائزہ

پاپ اوور پلگ ان کا استعمال کرتے وقت جاننے کی چیزیں:

• Popovers پوزیشننگ کے لیے 3rd پارٹی لائبریری Popper پر انحصار کرتے ہیں ۔ آپ کو bootstrap.js سے پہلے popper.min.jsbootstrap.bundle.min.js شامل کرنا چاہیے یا popovers کے کام کرنے کے لیے استعمال کریں / bootstrap.bundle.jsجس میں Popper شامل ہے!
• Popovers کو انحصار کے طور پر ٹول ٹپ پلگ ان کی ضرورت ہوتی ہے۔
• Popovers کارکردگی کی وجوہات کی بناء پر آپٹ ان ہوتے ہیں، لہذا آپ کو خود ان کی ابتدا کرنی چاہیے ۔
• صفر کی لمبائی titleاور contentاقدار کبھی بھی پاپ اوور نہیں دکھائیں گی۔
• container: 'body'مزید پیچیدہ اجزاء (جیسے ہمارے ان پٹ گروپس، بٹن گروپس وغیرہ) میں رینڈرنگ کے مسائل سے بچنے کے لیے وضاحت کریں۔
• چھپے ہوئے عناصر پر پاپ اوور کو متحرک کرنا کام نہیں کرے گا۔
• .disabledریپر عنصر پر یا disabledعناصر کے لیے پاپ اوور کو متحرک کیا جانا چاہیے۔
• متعدد لائنوں میں لپیٹنے والے اینکرز سے متحرک ہونے پر، پاپ اوور اینکرز کی مجموعی چوڑائی کے درمیان مرکوز ہوں گے۔ اس رویے سے بچنے کے لیے .text-nowrapاپنے ایس پر استعمال کریں ۔<a>
• پاپ اوور کو چھپایا جانا چاہیے اس سے پہلے کہ ان کے متعلقہ عناصر کو 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 میں بوٹسٹریپ استعمال کرتے وقت ہدایات کی عکس بندی کی جاتی ہے۔

<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=""۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے کیس کی قسم کو 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واقعہ پیش آنے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔ Popovers جن کا عنوان اور مواد دونوں زیرو لینتھ ہیں کبھی ظاہر نہیں ہوتے ہیں۔

myPopover.show()

چھپائیں

ایک عنصر کے پاپ اوور کو چھپاتا ہے۔ پوپ اوور کے حقیقت میں چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

myPopover.hide()

ٹوگل

ایک عنصر کے پاپ اوور کو ٹوگل کرتا ہے۔ پاپ اوور کے حقیقت میں دکھائے جانے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.popoverیا hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

myPopover.toggle()

تصرف

ایک عنصر کے پاپ اوور کو چھپاتا اور تباہ کرتا ہے (DOM عنصر پر ذخیرہ شدہ ڈیٹا کو ہٹاتا ہے)۔ ڈیلیگیشن کا استعمال کرنے والے پاپ اوور (جو آپشن کا استعمال کرتے ہوئے بنائے گئےselector ہیں ) کو نسلی محرک عناصر پر انفرادی طور پر تباہ نہیں کیا جا سکتا۔

myPopover.dispose()

فعال

ایک عنصر کے پاپ اوور کو دکھانے کی صلاحیت دیتا ہے۔ پاپ اوور بطور ڈیفالٹ فعال ہوتے ہیں۔

myPopover.enable()

غیر فعال

کسی عنصر کے پاپ اوور کو دکھانے کی صلاحیت کو ہٹاتا ہے۔ پاپ اوور صرف اس صورت میں دکھایا جا سکے گا جب اسے دوبارہ فعال کیا جائے۔

myPopover.disable()

toggleEnabled

کسی عنصر کے پاپ اوور کو دکھانے یا چھپانے کی صلاحیت کو ٹوگل کرتا ہے۔

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