টোস্ট বিজ্ঞপ্তি তৈরি করা হচ্ছে

টোস্ট বিজ্ঞপ্তি হল ক্ষণস্থায়ী স্ট্যাটাস মেসেজ। মেনুর মতো, ব্যবহারকারী পৃষ্ঠার অন্যান্য অংশের সাথে ইন্টার‍্যাক্ট করলে এগুলি বন্ধ হওয়া উচিত নয়। popover="manual" স্টেটটি আদর্শ কারণ এতে "লাইট-ডিসমিস" আচরণ নেই এবং একাধিক বিজ্ঞপ্তি একসাথে থাকতে দেয়।

প্রয়োগ সংক্রান্ত নির্দেশিকা

• বাধ্যতামূলক: popover="manual" ব্যবহার করুন যাতে বিজ্ঞপ্তিটি স্পষ্টভাবে বন্ধ না করা পর্যন্ত বা স্ক্রিপ্টের মাধ্যমে টাইম আউট না হওয়া পর্যন্ত দৃশ্যমান থাকে।
• একাধিক টোস্টের স্ট্যাকিং ম্যানেজ করতে কন্টেনার ব্যবহার করুন। যেহেতু টপ লেয়ারে পপওভার পেরেন্ট z-ইনডেক্সকে উপেক্ষা করে, তাই আপনাকে সেগুলি আলাদাভাবে বা একটি সাধারণ লেআউট গ্রুপের মধ্যে রাখতে হবে।
• টোস্ট বিজ্ঞপ্তির মধ্যে মার্জিন যোগ করতে sibling-index() ব্যবহার করুন যাতে স্ট্যাকের নিচের আইটেমগুলি দেখা যায়।
• টোস্টের মধ্যে popovertargetaction= "hide" ব্যবহার করে"বন্ধ করুন" বোতামটি স্পষ্টভাবে দেখাতে হবে।
• অটো-ডিসমিসাল টাইমারের জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন (যেমন, ৩০০০ মিলি সেকেন্ড পরে hidePopover() কল করা)।
• টপ লেয়ারে এন্ট্রি ও এক্সিট অ্যানিমেট করতে transition-behavior: allow-discrete ব্যবহার করুন।

ফলব্যাক স্ট্র্যাটেজি

পপওভারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

পপওভার API মূলত প্রোগ্রেসিভ এনহ্যান্সমেন্ট, তবে এর সংজ্ঞায়িত আচরণ — টপ-লেয়ার প্রোমোশন, লাইট-ডিসমিস এবং popovertarget ইনভোকেশন — শুধুমাত্র CSS-এর সমতুল্য নয়। পুরনো ব্রাউজারের ক্ষেত্রে পলিফিল বা ম্যানুয়াল ফলব্যাক প্রয়োজন হয়, যদি আপনি কোনওটিই শিপ করতে না চান।

Polyfill: পুরনো ব্রাউজারে popover অ্যাট্রিবিউট কাজ করানোর জন্য, শর্তসাপেক্ষে @oddbird/popover-polyfill লোড করুন। বাধ্যতামূলক: HTMLElement.prototype-এ popover প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন — শর্তহীনভাবে এটি লোড করবেন না।

বান্ডলার বা ইমপোর্ট ম্যাপের মাধ্যমে:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

বান্ডলার ছাড়া, <script type="module">-এর মধ্যে CDN থেকে ইমপোর্ট করুন:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

স্টাইলিং সংক্রান্ত সতর্কতা: পলিফিল আসল :popover-open ছদ্ম-ক্লাসকে সংজ্ঞায়িত করতে পারে না, তাই এটি পরিবর্তে .\:popover-open ক্লাস প্রয়োগ করে। বাধ্যতামূলক: :is() বা :where()-এর সাথে দুটিকে একত্রিত করুন, অন্যথায় :popover-open নেই এমন ব্রাউজার সম্পূর্ণ নিয়মটি বাতিল করে দেয়:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

বিকল্প হিসেবে, পলিফিল ছাড়া লিগ্যাসি ফলব্যাকের জন্য, position: fixed ব্যবহার করুন এবং getBoundingClientRect()-এর মাধ্যমে ম্যানুয়ালি কোঅর্ডিনেট হিসেব করুন অথবা ব্যবহারের ক্ষেত্রে গ্রহণযোগ্য হলে inset: auto-এর সাথে ডিফল্ট পজিশনিংয়ের উপর নির্ভর করুন।

sibling-index()

• নির্দেশিকা: sibling-index() কাজ না করলে, ম্যানুয়ালি মার্জিন যোগ করতে + অপারেটর ব্যবহার করুন। যেমন, popover + popover { margin-top: 1rem }

অ্যাঙ্কর-পজিশনিং

• নির্দেশিকা: CSS অ্যাঙ্কর পজিশনিং পলিফিল ব্যবহার করুন। নন-পলিফিল ফলব্যাকের জন্য, @supports not (anchor-name: --foo) ব্যবহার করে ভিউপোর্টের নিচে একটি নির্দিষ্ট পজিশনে টুলটিপ ডিফল্ট করুন।

ট্রানজিশন-আচরণ

• নির্দেশিকা: transition-behavior কাজ না করলে, টোস্ট এলিমেন্ট ট্রানজিশন ইন ও আউট হওয়ার সময় ক্লাস ব্যবহার করে অ্যানিমেশন যোগ করতে JavaScript ব্যবহার করুন।