پاپورز

جائزہ

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

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

چار سمتیں۔

چار اختیارات دستیاب ہیں: اوپر، دائیں، نیچے اور بائیں۔ 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تاکہ پاپ اوور کا ایچ ٹی ایم ایل اس عنصر کے اندر ظاہر ہو۔ یہ ریسپانسیو ٹیبلز، ان پٹ گروپس اور اس طرح کی چیزوں میں عام ہے۔

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

ایک اور صورت حال جہاں آپ ایک واضح کسٹم سیٹ کرنا چاہیں گے وہ ہیں ایک modal dialogcontainer کے اندر popovers ، اس بات کو یقینی بنانے کے لیے کہ popover خود موڈل میں شامل ہے۔ یہ خاص طور پر ان پاپ اوور کے لیے اہم ہے جو انٹرایکٹو عناصر پر مشتمل ہوتے ہیں - موڈل ڈائیلاگ فوکس کو پھنسائیں گے، لہذا جب تک کہ پاپ اوور موڈل کا چائلڈ عنصر نہیں ہے، صارفین ان انٹرایکٹو عناصر کو فوکس یا فعال نہیں کر سکیں گے۔

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

اپنی مرضی کے مطابق popovers

آپ 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ٹوگل عنصر سے مختلف عنصر کے صارف کے اگلے کلک پر پاپ اوور کو مسترد کرنے کے لیے ٹرگر کا استعمال کریں ۔

<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 متغیرات .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);
  

Sass متغیرات

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

استعمال

جاوا اسکرپٹ کے ذریعے پاپ اوور کو فعال کریں:

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

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 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...
})