পপওভার এবং ডায়ালগ

একটি পপওভার হল একটি popover অ্যাট্রিবিউট সহ যেকোন উপাদান, এবং টুলটিপস, সতর্কতা, টোস্ট এবং আরও অনেক কিছু সহ ইন্টারেক্টিভ প্যাটার্নের একটি বিস্তৃত পরিসরের জন্য দরকারী৷

<div id="my-popover" popover>My popover content</div>

popover অ্যাট্রিবিউট ডিফল্টরূপে উপাদানটিকে লুকিয়ে রাখে এবং ব্যবহারকারীদের এটি খোলার জন্য আপনাকে একটি উপায় প্রদান করতে হবে। যদিও পপওভারগুলি উপরের স্তরে স্থাপন করা হয়, অন্যান্য সমস্ত সামগ্রীর উপরে, সেগুলি মডেল নয়। এর মানে আপনি এখনও পপওভারের বাইরে সামগ্রীর সাথে ইন্টারঅ্যাক্ট করতে পারেন৷

পপভার নিয়ন্ত্রণ করা

আমরা বিভিন্ন ধরণের পপোভার এবং তারা কীভাবে আচরণ করে তা অন্বেষণ করার আগে, কীভাবে আপনার পপোভারগুলি খুলতে এবং বন্ধ করতে হয় তা দেখুন।

ঘোষণামূলকভাবে

জাভাস্ক্রিপ্ট ব্যবহার না করে, বোতাম (এবং button ধরন সহ ইনপুট) এবং popovertarget অ্যাট্রিবিউট ব্যবহার করে পপওভার সম্পূর্ণরূপে HTML-এ নিয়ন্ত্রণ করা যেতে পারে।

পূর্ববর্তী কোড স্নিপেটের পপওভারে my-popover এর একটি id রয়েছে এবং আপনি পপওভার উল্লেখ করতে এটি ব্যবহার করতে পারেন।

<button popovertarget="my-popover">Toggle</button>

popovertargetaction="show" এবং popovertargetaction="hide" ব্যবহার করে একটি বোতাম খোলা বা বন্ধ করা উচিত কিনা তাও আপনি নির্দিষ্ট করতে পারেন।

জাভাস্ক্রিপ্ট দিয়ে

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি পপওভার নিয়ন্ত্রণ করতে পারেন, যা ব্যবহারকারীর একটি বোতামে ক্লিক করার পাশাপাশি কোনও কিছুর প্রতিক্রিয়া হিসাবে একটি পপওভার দেখাতে চাইলে এটি কার্যকর। এটি করার জন্য, আপনাকে পপওভার উপাদানটি পেতে হবে, এবং তারপর showPopover() , hidePopover() , বা togglePopover() কল করুন।

পপোভারের প্রকারভেদ

আপনি যখন আপনার সাইটে একটি পপওভার যোগ করেন, তখন বিবেচনা করার জন্য প্রচুর মিথস্ক্রিয়া থাকে। এটা কিভাবে খুলবে? কিভাবে ব্যবহারকারীরা এটা খারিজ করতে পারেন? অন্যান্য খোলা পপভারের কি হবে? তিন ধরনের পপওভার রয়েছে এবং আপনি এমন ধরনের নির্বাচন করতে পারেন যা আপনার ব্যবহারের ক্ষেত্রে প্রয়োজনীয় আচরণ এবং মিথস্ক্রিয়া প্রদান করে।

অটো পপভার

স্বয়ংক্রিয় পপওভারে সর্বাধিক কার্যকারিতা অন্তর্নির্মিত থাকে এবং আপনি যদি কোনও প্রকার নির্দিষ্ট না করেন তবে এটি ডিফল্ট।

<div id="popover" popover>My popover</div>

অনেক ক্ষেত্রে, আপনি একই সময়ে একাধিক পপোভার খুলতে চান না, তাই অটো পপভারগুলি খোলা হলে অন্যান্য অটো পপভারগুলি বন্ধ করে দেয়। তারা "হালকা বরখাস্ত" সমর্থন করে, যার অর্থ আপনি যদি পপওভারের বাইরে ক্লিক করেন তবে এটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। এটি Esc কী দিয়েও বন্ধ করা যেতে পারে।

ম্যানুয়াল popovers

যদিও স্বয়ংক্রিয় পপওভার আচরণ অনেকগুলি ব্যবহারের ক্ষেত্রে কভার করে, এমন কিছু উদাহরণ রয়েছে যেখানে আপনার পপওভারগুলির আরও নিয়ন্ত্রণের প্রয়োজন হতে পারে। ম্যানুয়াল পপওভারের সাথে, আপনার অনেক বেশি নিয়ন্ত্রণ থাকে এবং অনেক বেশি আচরণের জন্যও আপনি দায়ী।

<div id="popover" popover="manual">My popover</div>

এই পপওভারটি শুধুমাত্র তখনই বন্ধ হবে যখন আপনি এটিকে স্পষ্টভাবে বন্ধ করবেন-এটি হালকা খারিজ বা Esc কী দ্বারা বন্ধ করা যাবে না। এটি আপনাকে একসাথে একাধিক পপওভার খুলতে দেয়।

ইঙ্গিত popovers

আপনি আপনার পৃষ্ঠায় টুলটিপ যোগ করতে পপওভার ব্যবহার করতে চাইতে পারেন। এই প্যাটার্নে, আপনি একটি আইটেমের উপর হোভার করতে সক্ষম হতে চান এবং একটি বিবরণ দেখতে চান। একটি সময়ে শুধুমাত্র একটি খোলা উচিত. আপনি যদি স্বয়ংক্রিয় পপভার ব্যবহার করেন, একটি খোলার ফলে অন্য কোনো খোলা অটো পপভার বন্ধ হয়ে যাবে। আপনি যদি ম্যানুয়াল পপোভার ব্যবহার করেন, তাহলে আপনাকে অন্যান্য পপওভার বন্ধ করা সহ অনেক আচরণ ম্যানুয়ালি প্রয়োগ করতে হবে। ইঙ্গিত পপভারগুলি অটো পপভারের মতো আচরণ সহ একটি তৃতীয় বিকল্প প্রদান করে। যাইহোক, একটি ইঙ্গিত পপওভার খোলা অটো পপওভার বন্ধ করে না।

<div id="popover" popover="hint">My popover</div>

প্রাথমিক বিষয়বস্তুর গৌণ সম্পূরক তথ্যের জন্য ইঙ্গিত পপওভার উপযোগী। আপনি প্রায়ই হোভার বা ফোকাসের মতো অ-ক্লিক ইভেন্টগুলির সাথে ইঙ্গিত পপভার ট্রিগার করতে চাইবেন।

আপনার পপওভারের অবস্থান

ডিফল্টরূপে, আপনার পপভারগুলি স্ক্রিনের মাঝখানে খুলবে। এগুলি আপনার অন্যান্য সমস্ত সামগ্রীর উপরে উপরের স্তরে যুক্ত করা হয়েছে এবং ভিউপোর্টের সাথে সম্পর্কিত করা যেতে পারে৷

এটি সর্বদা আদর্শ নয়, কারণ আপনি প্রায়শই আপনার পপওভারটিকে সেই আইটেমের কাছাকাছি রাখতে চান যা তাদের ট্রিগার করে। অ্যাঙ্কর পজিশনিং এটি করার একটি উপায় প্রদান করে।

অ্যাঙ্কর পজিশনিং-এর দুটি ধাপ রয়েছে- অ্যাঙ্কর উপাদান সংজ্ঞায়িত করা এবং সেই অ্যাঙ্করের সাথে সম্পর্কিত আপনার উপাদান স্থাপন করা। Popovers আপনার জন্য একটি অন্তর্নিহিত অ্যাঙ্কর সেট করে প্রথম ধাপ পরিচালনা করতে পারে। আপনি যখন <button popovertarget> ব্যবহার করে একটি পপওভার খোলেন, তখন বোতামটি অন্তর্নিহিত অ্যাঙ্কর। আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে একটি পপওভার খুলছেন, আপনি source বিকল্পের সাথে অন্তর্নিহিত অ্যাঙ্কর সেট করতে পারেন।

ডিফল্টরূপে, একটি পপওভার margin: auto । অ্যাঙ্কর পজিশনিং ব্যবহার করতে, আপনাকে সম্ভবত margin: unset ।

শৈলী এবং অ্যানিমেশন

::ব্যাকড্রপ সিউডো উপাদান

আপনার পৃষ্ঠার অন্যান্য বিষয়বস্তুর উপরে পপওভারগুলি একটি শীর্ষ স্তরে খোলে। পপওভারের নীচে একটি ::backdrop সিউডো উপাদান রয়েছে যা স্টাইল করা যেতে পারে।

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে একটি পপওভারের বাইরের বিষয়বস্তু জড় নয়-আপনি এখনও বোতামে ক্লিক করতে পারেন এবং পৃষ্ঠাটি নেভিগেট করতে আপনার কীবোর্ড ব্যবহার করতে পারেন৷ আপনার পৃষ্ঠার বিষয়বস্তুগুলিকে অস্পষ্ট করা উচিত নয়, উদাহরণস্বরূপ, একটি ভারী অস্পষ্ট প্রভাব প্রয়োগ করে বা একটি অস্বচ্ছ রঙে পটভূমি সেট করে৷

পপওভার-ওপেন সিউডো ক্লাস

বলুন আপনি CSS গ্রিড ব্যবহার করে আপনার পপওভার সামগ্রী লেআউট করতে চান। আপনি [popover]{ display: grid } যোগ করেন, এবং হঠাৎ আপনার সমস্ত পপওভার দৃশ্যমান হয়৷ এর কারণ হল display: none । পপওভার খোলা থাকলেই আপনি শৈলী প্রয়োগ করতে :popover-open pseudo class ব্যবহার করতে পারেন।

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open যখন আপনি একটি পপওভার অ্যানিমেট করছেন তখনও কার্যকর।

অ্যানিমেটিং popovers

একটি পপওভারের অ্যানিমেশনে 3টি ধাপ রয়েছে:

1. @starting-style {popover:popover-open { } } পপওভারটি দৃশ্যমান হওয়ার সাথে সাথে তার জন্য প্রাথমিক শৈলী। মনে রাখবেন যে এটি #2 এর পরে আপনার স্টাইলশীটে সংজ্ঞায়িত করা দরকার।
2. popover:popover-open { } -পপওভারের স্টাইল যখন এটি খোলা থাকে।
3. popover { } - পপওভার বন্ধ হওয়ার সাথে সাথে যে স্টাইলগুলিতে যায়৷

একটি পপওভার display: none । এটিকে অ্যানিমেট করতে, আপনাকে transition-behavior: allow-discrete , এবং transition বৈশিষ্ট্যের তালিকায় display যোগ করুন।

আপনি যদি আপনার পপওভারকে একটি অন্তর্নিহিত অ্যাঙ্কর দিয়ে অবস্থান করেন, তাহলে আপনাকে transition বৈশিষ্ট্যের তালিকায় overlay যোগ করতে হবে। উপরের স্তর থেকে পপওভার সরানোর পরে অন্তর্নিহিত অ্যাঙ্কর সম্পর্কটি সরানো হয়, তাই overlay প্রপার্টিতে একটি ট্রানজিশন যোগ করা হলে প্রস্থান ট্রানজিশন সম্পূর্ণ না হওয়া পর্যন্ত বিলম্ব হয়।

পপোভারের মধ্যে মিথস্ক্রিয়া

আপনার সম্ভবত একটি পৃষ্ঠায় একাধিক পপওভার থাকবে এবং তারা কীভাবে ইন্টারঅ্যাক্ট করবে তা তাদের ধরন এবং কীভাবে ব্যবহার করা হয় তার উপর নির্ভর করে।

নেস্টেড popovers

কিছু ক্ষেত্রে, আপনাকে অন্য পপওভারের ভিতর থেকে একটি পপওভার খুলতে হতে পারে। উদাহরণস্বরূপ, আপনার একটি পপওভার মেনু থাকতে পারে এবং মেনু আইটেমগুলির একটি একটি সাবমেনু খোলে। যখন ব্যবহারকারী প্রধান মেনু বন্ধ করে, আপনি সাবমেনু খোলা থাকতে চান না। পপোভারগুলি স্বয়ংক্রিয়ভাবে এটি পরিচালনা করতে সহায়তা করতে পারে।

আপনি যদি একটি ইঙ্গিত পপওভার থেকে একটি ইঙ্গিত পপওভার খুলছেন, অথবা একটি স্বয়ংক্রিয় পপওভার থেকে একটি অটো পপওভার খুলছেন, পপওভারগুলি একটি স্ট্যাকের মধ্যে রাখা হয়৷ একটি পপওভার বন্ধ করা স্ট্যাকের পরে সমস্ত পপওভার বন্ধ করে দেয়। এটি হালকা বরখাস্তের সাথেও কাজ করে- যদি আপনি একটি পপওভারে ক্লিক করেন, স্ট্যাকের পরে থাকা সমস্ত পপওভার বন্ধ হয়ে যাবে, তবে আগের পপওভারগুলি খোলা থাকবে।

একটি পপওভার স্ট্যাকে যোগ করা হয় যদি এর উৎস উপাদানটি একটি পপওভারের ভিতরে থাকে। আপনি যখন একটি বোতামে popovertarget ব্যবহার করেন বা .showPopover({source}) বা .togglePopover({source}) কল করার সময় source বিকল্প সেট করে জাভাস্ক্রিপ্টের সাথে সোর্স উপাদানটি স্বয়ংক্রিয়ভাবে সেট হয়ে যায়।

অটো পপভারের জন্য একটি স্ট্যাক এবং ইঙ্গিত পপভারের জন্য একটি পৃথক স্ট্যাক রয়েছে। যাইহোক, যদি আপনি একটি অটো পপওভারের ভিতর থেকে একটি ইঙ্গিত পপওভার খোলেন তবে এটি অটো স্ট্যাকের সাথে যুক্ত হয়ে যায়।

মনে রাখবেন যে ইঙ্গিত পপওভারগুলি সহজ, ক্ষণস্থায়ী তথ্যের জন্য তৈরি, তাই আপনি একটি ইঙ্গিত পপওভার থেকে একটি স্বয়ংক্রিয় পপওভার ট্রিগার করতে পারবেন না৷

আপনি যদি ম্যানুয়াল পপওভার ব্যবহার করেন, তাহলে আপনাকে এই সমস্ত ম্যানুয়ালি পরিচালনা করতে হবে।

অন্যান্য পপওভার প্রকার বন্ধ করা হচ্ছে

আপনি শিখেছেন যে একটি স্বয়ংক্রিয় পপওভার খোলার ফলে অন্যান্য অটো পপওভার বন্ধ হয়ে যায়, কিন্তু কীভাবে বিভিন্ন ধরনের যোগাযোগ করে? তিনটি প্রকার ব্যবহার করে এমন একটি পৃষ্ঠার উদাহরণ দিয়ে এটি অন্বেষণ করুন। বোতাম সহ একটি নেভিগেশন মেনু রয়েছে যা খুলতে এবং বন্ধ করতে স্বয়ংক্রিয় পপওভার ব্যবহার করে। পৃষ্ঠায় পাঠ্য রয়েছে যা প্রাসঙ্গিক টুলটিপগুলি দেখানোর জন্য ইঙ্গিত পপওভার ব্যবহার করে। এবং পরিশেষে, ব্যবহারকারীকে একটি ব্যাকগ্রাউন্ড টাস্ক সম্পূর্ণ করার জন্য একটি ম্যানুয়াল পপওভার সহ একটি টোস্ট রয়েছে।

টুলটিপগুলি ক্ষণস্থায়ী, এবং আমরা যখন পাঠ্যের উপর মাউস করি তখন প্রদর্শিত হয়। আমরা আশা করি যে একবারে শুধুমাত্র একটি টুলটিপ দৃশ্যমান হবে এবং একটি দ্বিতীয় ইঙ্গিত পপওভার ট্রিগার করলে প্রথমটি বন্ধ হয়ে যাবে।

আপনি যখন একটি বোতামে ক্লিক করে মেনু খুলবেন, তখন ইঙ্গিতটি দুটি কারণে বন্ধ হয়ে যায়। প্রথমত, ইঙ্গিতের বাইরে ক্লিক করলে হালকা বরখাস্ত হয়। দ্বিতীয়ত, একটি অটো পপওভার খোলার ফলে সমস্ত খোলা ইঙ্গিত পপওভার বাতিল হয়ে যায়। এর কারণ হল ব্যবহারকারীরা যে বিষয়ে ফোকাস করছেন তা পরিবর্তন করেছেন এবং একটি ইঙ্গিত পপওভারে ক্ষণস্থায়ী বিষয়বস্তু আর প্রাসঙ্গিক নয়। এর মানে হল যে আপনি যদি একটি স্বয়ংক্রিয় পপওভারে showPopover() কল করেন, যে কোনো খোলা ইঙ্গিত পপওভার বন্ধ হয়ে যাবে।

ড্রপ-ডাউন মেনুগুলি অটো পপভার। ড্রপ-ডাউন মেনুগুলির সাহায্যে, আপনি আশা করেন যে একবারে শুধুমাত্র একটি খোলা থাকবে এবং একটি খোলার ফলে অন্যটি বন্ধ হবে। আপনি যেমন দেখেছেন, একটি স্বয়ংক্রিয় পপওভার খোলার ফলে যেকোনো খোলা ইঙ্গিত পপওভারও বন্ধ হয়ে যায়।

যাইহোক, যখন একটি ড্রপ-ডাউন মেনু খোলা থাকে, আপনি এখনও একটি সম্পর্কহীন টুলটিপের বিষয়বস্তু দেখতে চাইতে পারেন। একটি ইঙ্গিত টুলটিপ দেখানো স্বয়ংক্রিয় পপভার বন্ধ করে না।

ম্যানুয়াল পপওভার অটো বা হিন্ট পপওভার দ্বারা প্রভাবিত হয় না এবং যখন এটি খোলে, এটি কোনও ইঙ্গিত বা অটো পপওভার বন্ধ করে না। যাইহোক, যদি আপনি একটি বোতামে ক্লিক করে একটি ম্যানুয়াল পপওভার খোলেন, এটি ইঙ্গিত এবং স্বয়ংক্রিয় পপওভারের হালকা খারিজ ট্রিগার করে।

পপওভারের ধরনগুলির মধ্যে মিথস্ক্রিয়াগুলি জটিল মনে হতে পারে, তবে আপনি যদি সঠিক পরিস্থিতিতে প্রকারগুলি ব্যবহার করেন তবে তারা সাধারণ ব্যবহারের নিদর্শনগুলির জন্য অনুমতি দেয়। যদি আপনার পপভারগুলি প্রত্যাশা অনুযায়ী ইন্টারঅ্যাক্ট না করে, তাহলে আপনি কোন ধরনের ব্যবহার করছেন তা আবার দেখুন।

আপনার উপলব্ধি পরীক্ষা করুন