Popover API বেসলাইনে ল্যান্ড করে

উনা ক্রেভেটস

এটা ঘটছে! আমি যে বৈশিষ্ট্যগুলি নিয়ে সবচেয়ে বেশি আলোড়িত হয়েছি তার মধ্যে একটি হল সব আধুনিক ব্রাউজার জুড়ে এবং আনুষ্ঠানিকভাবে বেসলাইন 2024-এর একটি অংশ৷ এবং এই বৈশিষ্ট্যটি হল Popover API ৷ টুলটিপ, মেনু, শিক্ষণ UI এবং আরও অনেক কিছুর মতো স্তরযুক্ত ইন্টারফেস তৈরির জন্য পপওভার অনেকগুলি দুর্দান্ত আদিম এবং বিকাশকারীর সুবিধা প্রদান করে৷

ব্রাউজার সমর্থন

  • ক্রোম: 114।
  • প্রান্ত: 114।
  • ফায়ারফক্স: 125।
  • সাফারি: 17।

উৎস

পপওভার ক্ষমতার কিছু দ্রুত হাইলাইট অন্তর্ভুক্ত:

  • শীর্ষ স্তরে পদোন্নতি। পপওভারগুলি পৃষ্ঠার বাকি অংশের উপরে উপরের স্তরে উপস্থিত হবে, তাই আপনাকে z-index এর সাথে খেলতে হবে না।
  • হালকা-খারিজ কার্যকারিতা। পপওভার এলাকার বাইরে ক্লিক করলে পপওভার বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
  • ডিফল্ট ফোকাস ব্যবস্থাপনা। পপওভার খোলার ফলে পপওভারের ভিতরে পরবর্তী ট্যাব বন্ধ হয়ে যায়।
  • অ্যাক্সেসযোগ্য কীবোর্ড বাইন্ডিং। esc কী বা ডবল টগল করা হলে পপওভার বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
  • অ্যাক্সেসযোগ্য উপাদান বাঁধাই. একটি পপওভার উপাদানকে শব্দার্থকভাবে একটি পপওভার ট্রিগারের সাথে সংযুক্ত করা।

পপোভার তৈরি করা

পপোভার তৈরি করা বেশ সোজা। ডিফল্ট মান ব্যবহার করার জন্য, পপওভার ট্রিগার করার জন্য আপনার যা দরকার তা হল একটি button এবং ট্রিগার করার জন্য একটি উপাদান।

  • প্রথমে, উপাদানটির উপর একটি popover অ্যাট্রিবিউট সেট করুন যা পপওভার হতে চলেছে।
  • তারপর, পপওভার এলিমেন্টে একটি অনন্য id যোগ করুন।
  • অবশেষে, পপওভারে বোতামটি সংযোগ করতে, বোতামের popovertarget পপওভার উপাদানের id মান নির্ধারণ করুন।

এটি নিম্নলিখিত কোডে দেখানো হয়েছে:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
পপওভার অ্যাট্রিবিউট ব্যবহার করার একটি মৌলিক উদাহরণ।

পপওভারের উপর আরও দানাদার নিয়ন্ত্রণের জন্য, আপনি স্পষ্টভাবে পপওভারের ধরন সেট করতে পারেন। উদাহরণস্বরূপ, কোনো মান ছাড়াই একটি বেয়ার popover অ্যাট্রিবিউট ব্যবহার করা popover="auto" এর মতোই। auto মান হালকা-খারিজ আচরণ সক্ষম করে এবং স্বয়ংক্রিয়ভাবে অন্যান্য পপওভার বন্ধ করে। popover="manual" ব্যবহার করুন এবং আপনাকে একটি ক্লোজ বোতাম যোগ করতে হবে, ম্যানুয়াল পপোভারগুলি অন্য পপওভারগুলি বন্ধ করে না বা ব্যবহারকারীদের UI এ ক্লিক করে পপওভার খারিজ করার অনুমতি দেয় না৷ আপনি নিম্নলিখিত ব্যবহার করে একটি ম্যানুয়াল পপওভার তৈরি করুন:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
ম্যানুয়াল পপওভারের উদাহরণ।

পপওভার বনাম মডেল ডায়ালগ

আপনি হয়তো ভাবছেন যে ডায়ালগ থাকা অবস্থায় আপনার পপওভারের প্রয়োজন হবে এবং উত্তর হল: আপনি নাও হতে পারে।

এটা মনে রাখা গুরুত্বপূর্ণ যে পপওভার অ্যাট্রিবিউটটি নিজে থেকে শব্দার্থবিদ্যা প্রদান করে না। এবং যখন আপনি এখন পপওভার ব্যবহার করে মডেল ডায়ালগের মতো অভিজ্ঞতা তৈরি করতে পারেন, তখন দুটির মধ্যে কয়েকটি মূল পার্থক্য রয়েছে:

মডেল <dialog> উপাদান

  • dialog.showModal() দিয়ে খোলা হয়েছে।
  • dialog.close() দিয়ে বন্ধ।
  • পাতার বাকি অংশকে জড় করে তোলে।
  • হালকা-খারিজ আচরণ সমর্থন করে না।
  • আপনি [open] অ্যাট্রিবিউট দিয়ে ওপেন স্টেট স্টাইল করতে পারেন।
  • শব্দার্থগতভাবে একটি ইন্টারেক্টিভ উপাদান উপস্থাপন করে যা পৃষ্ঠার বাকি অংশের সাথে মিথস্ক্রিয়াকে ব্লক করে।

[popover] বৈশিষ্ট্য

  • একটি ঘোষণামূলক আহ্বানকারী ( popovertarget ) দিয়ে খোলা যেতে পারে।
  • popovertarget (অটো পপওভার) বা popovertargetaction=hide (ম্যানুয়াল পপওভার) দিয়ে বন্ধ।
  • পাতার বাকি অংশকে জড় করে না।
  • হালকা-খারিজ আচরণ সমর্থন করে।
  • আপনি :popover-open pseudo-class দিয়ে ওপেন স্টেট স্টাইল করতে পারেন।
  • কোন অন্তর্নিহিত শব্দার্থবিদ্যা.

উপসংহার এবং আরও পড়া

popover প্ল্যাটফর্মে নিয়ে আসে এমন অনেক উত্তেজনাপূর্ণ বৈশিষ্ট্য রয়েছে। বৈশিষ্ট্যের অ্যাক্সেসযোগ্যতা এবং বৈশিষ্ট্য সেট সম্পর্কিত ডকুমেন্টেশন সহ এই API সম্পর্কে আরও জানতে, আরও তথ্যের জন্য এখানে কিছু পড়ার সুপারিশ করা হল: