پاپورز

Bootstrap popovers شامل کرنے کے لیے دستاویزات اور مثالیں، جیسا کہ iOS میں پایا جاتا ہے، آپ کی سائٹ کے کسی بھی عنصر میں۔

جائزہ

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

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

پہلے سے طے شدہ طور پر، یہ جزو بلٹ ان مواد سینیٹائزر کا استعمال کرتا ہے، جو کسی بھی HTML عناصر کو ہٹا دیتا ہے جس کی واضح طور پر اجازت نہیں ہے۔ مزید تفصیلات کے لیے ہمارے JavaScript دستاویزات میں سینیٹائزر کا سیکشن دیکھیں ۔

prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

یہ دیکھنے کے لیے پڑھتے رہیں کہ پاپ اوور کچھ مثالوں کے ساتھ کیسے کام کرتے ہیں۔

مثال: ہر جگہ پاپ اوور کو فعال کریں۔

کسی صفحے پر تمام پاپ اوور کو شروع کرنے کا ایک طریقہ یہ ہوگا کہ ان کو ان کے data-toggleوصف سے منتخب کیا جائے:

$(function () {
  $('[data-toggle="popover"]').popover()
})

مثال: `container`آپشن کا استعمال

جب آپ کے پاس پیرنٹ ایلیمنٹ پر کچھ اسٹائل ہوتے ہیں جو پاپ اوور میں مداخلت کرتے ہیں، تو آپ اپنی مرضی کی وضاحت کرنا چاہیں گے containerتاکہ پاپ اوور کا ایچ ٹی ایم ایل اس عنصر کے اندر ظاہر ہو۔

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

مثال

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

چار سمتیں۔

چار اختیارات دستیاب ہیں: اوپر، دائیں، نیچے، اور بائیں سیدھ میں۔

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

اگلے کلک پر برخاست کریں۔

focusٹوگل عنصر سے مختلف عنصر کے صارف کے اگلے کلک پر پاپ اوور کو مسترد کرنے کے لیے ٹرگر کا استعمال کریں ۔

برخاست-پر-اگلے-کلک کے لیے مخصوص مارک اپ درکار ہے۔

مناسب کراس براؤزر اور کراس پلیٹ فارم رویے کے لیے، آپ کو ٹیگ کا استعمال کرنا چاہیے <a>، نہ کہ <button>ٹیگ، اور آپ کو ایک tabindexوصف بھی شامل کرنا چاہیے۔

مسترد کرنے والا پاپ اوور

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

غیر فعال عناصر

انتساب والے عناصر disabledمتعامل نہیں ہوتے ہیں، یعنی صارف پاپ اوور (یا ٹول ٹپ) کو متحرک کرنے کے لیے ان پر ہوور یا کلک نہیں کر سکتے۔ ایک کام کے طور پر، آپ پاپ اوور کو ریپر سے متحرک کرنا چاہیں گے <div>یا غیر فعال عنصر پر <span>اوور رائڈ کرنا چاہیں گے۔pointer-events

ڈس ایبلڈ پاپ اوور ٹرگرز کے لیے، آپ اس بات کو بھی ترجیح دے سکتے ہیں data-trigger="hover"کہ پاپ اوور آپ کے صارفین کے لیے فوری بصری فیڈ بیک کے طور پر ظاہر ہو کیونکہ وہ کسی معذور عنصر پر کلک کرنے کی توقع نہیں رکھتے۔

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

استعمال

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

$('#example').popover(options)

GPU ایکسلریشن

GPU ایکسلریشن اور ترمیم شدہ سسٹم DPI کی وجہ سے بعض اوقات ونڈوز 10 ڈیوائسز پر پاپ اوور دھندلے دکھائی دیتے ہیں۔ v4 میں اس کا حل یہ ہے کہ آپ کے پاپ اوور پر ضرورت کے مطابق GPU ایکسلریشن کو غیر فعال کریں۔

تجویز کردہ اصلاح:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

کی بورڈ اور معاون ٹیکنالوجی کے صارفین کے لیے پاپ اوور کو کام کرنا

کی بورڈ صارفین کو آپ کے پاپ اوور کو چالو کرنے کی اجازت دینے کے لیے، آپ کو انہیں صرف HTML عناصر میں شامل کرنا چاہیے جو روایتی طور پر کی بورڈ پر توجہ دینے کے قابل اور انٹرایکٹو ہیں (جیسے لنکس یا فارم کنٹرول)۔ اگرچہ صوابدیدی HTML عناصر (جیسے <span>s) کو tabindex="0"انتساب کا اضافہ کر کے قابل توجہ بنایا جا سکتا ہے، لیکن اس سے کی بورڈ صارفین کے لیے غیر متعامل عناصر پر ممکنہ طور پر پریشان کن اور الجھا دینے والے ٹیب اسٹاپس شامل ہو جائیں گے، اور زیادہ تر معاون ٹیکنالوجیز فی الحال اس صورتحال میں پاپ اوور کے مواد کا اعلان نہیں کرتی ہیں۔ . hoverمزید برآں، اپنے پاپ اوور کے محرک کے طور پر مکمل طور پر انحصار نہ کریں، کیونکہ اس سے کی بورڈ صارفین کے لیے متحرک ہونا ناممکن ہو جائے گا۔

اگرچہ آپ آپشن کے ساتھ پاپ اوور میں بھرپور، سٹرکچرڈ HTML داخل کر سکتے ہیں html، ہم پرزور مشورہ دیتے ہیں کہ آپ ضرورت سے زیادہ مواد شامل کرنے سے گریز کریں۔ aria-describedbyفی الحال پاپ اوور جس طرح سے کام کرتے ہیں وہ یہ ہے کہ، ایک بار ڈسپلے ہونے کے بعد، ان کا مواد ٹریگر عنصر سے انتساب کے ساتھ منسلک ہوتا ہے۔ نتیجے کے طور پر، پاپ اوور کے مکمل مواد کا اعلان معاون ٹیکنالوجی کے صارفین کے لیے ایک طویل، بلاتعطل سلسلہ کے طور پر کیا جائے گا۔

مزید برآں، جب کہ آپ کے پاپ اوور میں انٹرایکٹو کنٹرولز (جیسے فارم عناصر یا لنکس) کو بھی شامل کرنا ممکن ہے (ان عناصر کو whiteListیا اجازت شدہ خصوصیات اور ٹیگز میں شامل کرکے)، آگاہ رہیں کہ فی الحال پاپ اوور کی بورڈ فوکس آرڈر کا نظم نہیں کرتا ہے۔ جب ایک کی بورڈ صارف پاپ اوور کھولتا ہے، تو محرک عنصر پر توجہ مرکوز رہتی ہے، اور چونکہ پاپ اوور عام طور پر دستاویز کے ڈھانچے میں فوری طور پر محرک کی پیروی نہیں کرتا، اس لیے اس بات کی کوئی ضمانت نہیں ہے کہ آگے بڑھنا/دبائیں۔TABایک کی بورڈ صارف کو پاپ اوور میں ہی لے جائے گا۔ مختصراً، صرف ایک پاپ اوور میں انٹرایکٹو کنٹرولز کو شامل کرنے سے ان کنٹرولز کو کی بورڈ استعمال کرنے والوں اور معاون ٹیکنالوجیز کے استعمال کنندگان کے لیے ناقابلِ رسائی/ناقابل استعمال ہونے کا امکان ہے، یا کم از کم ایک غیر منطقی مجموعی فوکس آرڈر کے لیے بنایا جا سکتا ہے۔ ان صورتوں میں، اس کے بجائے موڈل ڈائیلاگ استعمال کرنے پر غور کریں۔

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

نوٹ کریں کہ حفاظتی وجوہات کی بناء پر sanitize، sanitizeFnاور whiteListآپشنز کو ڈیٹا انتساب کا استعمال کرتے ہوئے فراہم نہیں کیا جا سکتا۔

نام	قسم	طے شدہ	تفصیل
حرکت پذیری	بولین	سچ ہے	پاپ اوور پر سی ایس ایس فیڈ ٹرانزیشن کا اطلاق کریں۔
کنٹینر	تار \| عنصر \| جھوٹا	جھوٹا	پاپ اوور کو ایک مخصوص عنصر سے جوڑتا ہے۔ مثال: `container: 'body'`. یہ آپشن خاص طور پر اس لیے مفید ہے کہ یہ آپ کو دستاویز کے بہاؤ میں پاپ اوور کو محرک عنصر کے قریب رکھنے کی اجازت دیتا ہے - جو ونڈو کا سائز تبدیل کرنے کے دوران پاپ اوور کو محرک عنصر سے دور تیرنے سے روکے گا۔
مواد	تار \| عنصر \| فنکشن	''	`data-content`اگر انتساب موجود نہ ہو تو مواد کی ڈیفالٹ قدر ۔ اگر کوئی فنکشن دیا جاتا ہے، تو اسے اس `this`عنصر کے حوالے سے کہا جائے گا جس کے ساتھ پاپ اوور منسلک ہے۔
تاخیر	نمبر \| چیز	0	پاپ اوور (ایم ایس) کو دکھانے اور چھپانے میں تاخیر - دستی ٹرگر کی قسم پر لاگو نہیں ہوتا ہے۔ اگر کوئی نمبر فراہم کیا جاتا ہے، تو چھپنے/دکھانے دونوں پر تاخیر کا اطلاق ہوتا ہے۔ آبجیکٹ کی ساخت ہے:`delay: { "show": 500, "hide": 100 }`
html	بولین	جھوٹا	پاپ اوور میں HTML داخل کریں۔ `text`غلط ہونے کی صورت میں DOM میں مواد داخل کرنے کے لیے jQuery کا طریقہ استعمال کیا جائے گا۔ اگر آپ XSS حملوں کے بارے میں فکر مند ہیں تو متن کا استعمال کریں۔
جگہ کا تعین	تار \| فنکشن	'صحیح'	پاپ اوور کی پوزیشن کیسے لگائیں - آٹو \| سب سے اوپر \| نیچے \| بائیں \| صحیح جب `auto`مخصوص کیا جاتا ہے، یہ متحرک طور پر پاپ اوور کو دوبارہ ترتیب دے گا۔ جب کسی فنکشن کو پلیسمنٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے پاپ اوور DOM نوڈ کے ساتھ اس کی پہلی دلیل کے طور پر اور محرک عنصر DOM نوڈ کو اس کے دوسرے کے طور پر کہا جاتا ہے۔ سیاق و سباق کو `this`پاپ اوور مثال پر سیٹ کیا گیا ہے۔
سلیکٹر	تار \| جھوٹا	جھوٹا	اگر ایک سلیکٹر فراہم کیا جاتا ہے، تو پاپ اوور اشیاء کو مخصوص اہداف کے حوالے کر دیا جائے گا۔ عملی طور پر، یہ متحرک HTML مواد کو پاپ اوور شامل کرنے کے لیے استعمال کیا جاتا ہے۔ یہ اور ایک معلوماتی مثال دیکھیں ۔
سانچے	تار	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	پاپ اوور بناتے وقت استعمال کرنے کے لیے بیس HTML۔ پاپ اوور `title`میں انجکشن لگایا جائے گا `.popover-header`۔ پاپ اوور `content`میں انجکشن لگایا جائے گا `.popover-body`۔ `.arrow`پاپ اوور کا تیر بن جائے گا۔ سب سے بیرونی ریپر عنصر کی `.popover`کلاس ہونی چاہیے۔
عنوان	تار \| عنصر \| فنکشن	''	`title`اگر انتساب موجود نہیں ہے تو پہلے سے طے شدہ عنوان کی قدر ۔ اگر کوئی فنکشن دیا جاتا ہے، تو اسے اس `this`عنصر کے حوالے سے کہا جائے گا جس کے ساتھ پاپ اوور منسلک ہے۔
محرک	تار	'کلک'	پاپ اوور کو کیسے متحرک کیا جاتا ہے - کلک کریں \| ہوور \| توجہ مرکوز \| دستی آپ متعدد محرکات کو پاس کر سکتے ہیں۔ انہیں ایک جگہ کے ساتھ الگ کریں. `manual`کسی دوسرے ٹرگر کے ساتھ نہیں مل سکتا۔
آفسیٹ	نمبر \| تار	0	اس کے ہدف کے نسبت پاپ اوور کا آفسیٹ۔ مزید معلومات کے لیے Popper's offset docs دیکھیں ۔
فال بیک پلیسمنٹ	تار \| صف	'پلٹائیں'	یہ بتانے کی اجازت دیں کہ Popper فال بیک پر کون سی پوزیشن استعمال کرے گا۔ مزید معلومات کے لیے Popper کے رویے کی دستاویزات دیکھیں
customClass	تار \| فنکشن	''	پاپ اوور کے دکھائے جانے پر کلاسز شامل کریں۔ نوٹ کریں کہ یہ کلاسز ٹیمپلیٹ میں بتائی گئی کسی بھی کلاس کے علاوہ شامل کی جائیں گی۔ متعدد کلاسز کو شامل کرنے کے لیے، انہیں خالی جگہوں سے الگ کریں: `'a b'`. آپ ایک فنکشن بھی پاس کر سکتے ہیں جس میں اضافی کلاس کے ناموں پر مشتمل ایک سٹرنگ واپس کرنی چاہیے۔
حد	تار \| عنصر	'اسکرول پیرنٹ'	پاپ اوور کی اوور فلو رکاوٹ کی حد۔ `'viewport'`, `'window'`, `'scrollParent'`, یا HTMLElement حوالہ (صرف JavaScript) کی اقدار کو قبول کرتا ہے ۔ مزید معلومات کے لیے Popper's preventOverflow docs دیکھیں ۔
جراثیم کشی	بولین	سچ ہے	سینیٹائزیشن کو فعال یا غیر فعال کریں۔ چالو ہونے `'template'`پر، `'content'`اور `'title'`اختیارات کو صاف کر دیا جائے گا۔ ہمارے JavaScript دستاویزات میں سینیٹائزر سیکشن دیکھیں ۔
وائٹ لسٹ	چیز	پہلے سے طے شدہ قیمت	آبجیکٹ جس میں اجازت دی گئی صفات اور ٹیگز شامل ہیں۔
sanitizeFn	null \| فنکشن	خالی	یہاں آپ اپنا سینیٹائز فنکشن فراہم کر سکتے ہیں۔ یہ کارآمد ثابت ہو سکتا ہے اگر آپ صفائی کو انجام دینے کے لیے ایک وقف شدہ لائبریری استعمال کرنے کو ترجیح دیں۔
popperConfig	null \| چیز	خالی	Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، Popper کی ترتیب دیکھیں

انفرادی پاپورز کے لیے ڈیٹا کی خصوصیات

جیسا کہ اوپر بیان کیا گیا ہے، انفرادی پاپ اوور کے اختیارات کو ڈیٹا کی خصوصیات کے استعمال کے ذریعے متبادل طور پر بیان کیا جا سکتا ہے۔

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر ایک طریقہ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

`$().popover(options)`

عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔

`.popover('show')`

ایک عنصر کے پاپ اوور کو ظاہر کرتا ہے۔ پاپ اوور کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔ Popovers جن کا عنوان اور مواد دونوں زیرو لینتھ ہیں کبھی ظاہر نہیں ہوتے ہیں۔

$('#element').popover('show')

`.popover('hide')`

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

$('#element').popover('hide')

`.popover('toggle')`

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

$('#element').popover('toggle')

`.popover('dispose')`

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

$('#element').popover('dispose')

`.popover('enable')`

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

$('#element').popover('enable')

`.popover('disable')`

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

$('#element').popover('disable')

`.popover('toggleEnabled')`

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

$('#element').popover('toggleEnabled')

`.popover('update')`

کسی عنصر کے پاپ اوور کی پوزیشن کو اپ ڈیٹ کرتا ہے۔

$('#element').popover('update')

تقریبات

واقعہ کی قسم	تفصیل
show.bs.popover	یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب `show`مثال کا طریقہ کہا جاتا ہے۔
دکھایا گیا بی ایس پاپ اوور	یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب پاپ اوور صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
hide.bs.popover	اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب `hide`مثال کے طریقے کو بلایا جاتا ہے۔
hidden.bs.popover	اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب پاپ اوور صارف سے پوشیدہ ہو جائے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
inserted.bs.popover	یہ ایونٹ اس ایونٹ کے بعد فائر کیا جاتا ہے `show.bs.popover`جب پاپ اوور ٹیمپلیٹ کو DOM میں شامل کیا جاتا ہے۔

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})