بوت استرپ 5 بولٹ

اپسیٹر

اپسیٹر (Popover) عناصر، ابزاری توجیہ کی طرح ہیں؛ یہ ایک ایسا ابزاری توجیہ ہے جو کہ کاربر نے عناصر پر کلک کیا تو نمودار ہوجاتا ہے۔ فرق یہ ہے کہ اپسیٹر میں زیادہ معلومات شامل کیاجاسکتی ہیں。

کیسا اپسیٹر قائم کریں؟

اپسیٹر قائم کرنے کیلئے، data-bs-toggle="popover" کیوائیٹی کا معیار، عناصر میں شامل کریں:

استعمال کریں title کیوائیٹی کا معیار، اپسیٹر کا عنوان نصاب، اور استعمال: data-bs-content کیوائیٹی کا معیار، اپسیٹر میں نمودار ہونے والی لکھت کا نصاب:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="اپسیٹر عنوان" data-bs-content="اپسیٹر میں کچھ معلومات">اپسیٹر کو چرچ کریں</button>

توجہ:اپسیٹر کو جی ایس اینیٹ کیاجائے گا تاکہ وہ کام کر سکے。

منظور شدہ کوڈ، تمام اپسیٹر کو فعال کردے ہیں:

مثال

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

خود کا تجربہ کریں

اپسیٹر کو مقرر کریں

جیبھی مقدار، اپسیٹر آپنے عناصر کی راست سائڈ میں نمودار ہوجائے گا。

استعمال کریں data-bs-placement اپسیٹر کا سیٹاپ بائس، توب، لائف سائڈ یا رائٹ سائڈ کی پوزیشن:

مثال

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="سربراہ" data-bs-toggle="popover" data-bs-placement="left" data-content="مطلب">بائیں</a>
<a href="#" title="سربراہ" data-bs-toggle="popover" data-bs-placement="right" data-content="مطلب">دائیں</a>

خود کا تجربہ کریں

توجہ:اگر کافی جگہ نہیں ہو، تو placement ویژگی آپ کی توقع کے مطابق کام نہیں کرے گی۔ مثلاً اگر آپ پہلے پوسٹ (کوئی ریزرو شدہ جگہ نہیں) پر top placement ویژگی استعمال کرتے ہیں، تو بالاپوچ نمودار ایک عنصر کے نیچے یا دائیں (کوئی جگہ جہاں جگہ ہو) نمودار ہوجائے گا。

بالاپوچ بند کرنا

مقصد سے، ایک بار پھر عنصر پر کلک کرنے پر بالاپوچ بند ہوجائے گا۔ لیکن آپ کا استعمال data-bs-trigger="focus" ویژگی، اس ویژگی کو قائم کرکے آپ کسی عنصر کے باہر کلک کرنے پر بالاپوچ کو بند کرسکتا ہو:

مثال

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="کسی بھی مقام پر کلک کرکے اس بالاپوچ کو بند کرسکتا ہو">مجھ پر کلک کریں</a>

خود کا تجربہ کریں

بالاپوچ نمودار

معلومات:اگر آپ چاہتے ہیں کہ آپ کا مووس پوائنٹر ایک عنصر پر مووم کرنے پر بالاپوچ نمودار ہو، تو آپ کا استعمال "hover" کا data-bs-trigger ویژگی:

مثال

<a href="#" title="سربراہ" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="بالاپوچ کا متن">میرے اوپر بلاک کریں</a>

خود کا تجربہ کریں