Bootstrap 5 পপআপ
- পূর্ববর্তী পৃষ্ঠা BS5 টুলটিপ
- পরবর্তী পৃষ্ঠা BS5 টোস্ট
পোপআপ
পোপআপ (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="শিরোনাম" data-bs-toggle="popover" data-bs-placement="top" data-content="বিষয়">শীর্ষ</a> <a href="#" title="শিরোনাম" data-bs-toggle="popover" data-bs-placement="bottom" data-content="বিষয়">তালা</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="ডিসমিসিবল পপআপ" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="ডকুমেন্টের যে কোনও স্থানে ক্লিক করলে এই পপআপ বন্ধ হবে">আমাকে ক্লিক করুন</a>
হলেকান পপআপ
সতর্কতা:যদি আপনি মাউস পিন্টারটি এলমেন্টের ওপর সরানোর সময় পপআপ দেখতে চান, তবে এই মানের ব্যবহার করুন: "হভার" র data-bs-trigger বৈশিষ্ট্য:
ইনস্ট্যান্স
<a href="#" title="হেডার" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="পপআপ টেক্সট">আমার ওপর হলেকান হয়</a>
- পূর্ববর্তী পৃষ্ঠা BS5 টুলটিপ
- পরবর্তী পৃষ্ঠা BS5 টোস্ট
