বিশদ এবং সারাংশ

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

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

অ্যাকর্ডিয়ন গ্রাফিকাল ইউজার ইন্টারফেস হল উল্লম্বভাবে স্ট্যাক করা ডিসক্লোজার উইজেটগুলির একটি সিরিজ। অ্যাকর্ডিয়নের জন্য একটি সাধারণ ব্যবহারের ক্ষেত্রে একটি প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ) পৃষ্ঠা। এই ক্ষেত্রে, একটি অ্যাকর্ডিয়ন FAQ-তে দৃশ্যমান প্রশ্নের একটি তালিকা রয়েছে। যখন ক্লিক করা হয়, প্রশ্নটি প্রসারিত হয়, বা "প্রকাশ করে" সেই প্রশ্নের উত্তর।

jQuery অন্তত 2009 সাল থেকে একটি অ্যাকর্ডিয়ন UI প্যাটার্ন অন্তর্ভুক্ত করেছে। মূল জাভাস্ক্রিপ্ট-মুক্ত অ্যাকর্ডিয়ন সমাধানের মধ্যে অন্তর্ভুক্ত রয়েছে প্রতিটি FAQ প্রশ্নকে একটি <label> এর পরে এটির লেবেলযুক্ত চেকমার্ক তৈরি করা এবং তারপর চেকমার্ক চেক করা হলে <div> উত্তর প্রদর্শন করা। CSS দেখতে এরকম কিছু ছিল:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

ইতিহাস কেন? ডিসক্লোজার উইজেট, যেমন জাভাস্ক্রিপ্ট বা ফর্ম কন্ট্রোল হ্যাক ছাড়া অ্যাকর্ডিয়ান, তুলনামূলকভাবে সাম্প্রতিক সংযোজন। <details> এবং <summary> উপাদানগুলি শুধুমাত্র জানুয়ারী 2020 থেকে আধুনিক ব্রাউজারগুলিতে সম্পূর্ণরূপে সমর্থিত হয়েছে। আপনি এখন কার্যকরী তৈরি করতে পারেন, যদিও আকর্ষণীয়, ডিসক্লোজার উইজেট শব্দার্থিক HTML সহ।

<details> এবং <summary> উপাদানগুলিই আপনার প্রয়োজন: এগুলি প্রসারিত এবং ভেঙে যাওয়া বিষয়বস্তু পরিচালনা করার জন্য একটি অন্তর্নির্মিত উপায়। যখন একজন ব্যবহারকারী <summary> এ ক্লিক করে বা ট্যাপ করে, অথবা <summary> -এর ফোকাস থাকলে Enter কী রিলিজ করে, তখন প্যারেন্ট <details> -এর বিষয়বস্তু দৃশ্যমান হতে টগল করে।

সমস্ত শব্দার্থিক বিষয়বস্তুর মত, আপনি ক্রমান্বয়ে ডিফল্ট বৈশিষ্ট্য এবং চেহারা উন্নত করতে পারেন। এই ক্ষেত্রে, সিএসএসের একটি ছোট বিট যোগ করা হয়েছে:

তার মানে, এই কোডপেন (এবং সমস্ত কোডপেন নমুনা) কোনো জাভাস্ক্রিপ্ট নেই।

open অ্যাট্রিবিউট দিয়ে দৃশ্যমানতা টগল করুন

<details> উপাদান হল প্রকাশ উইজেট ধারক। <summary> হল সারাংশ বা কিংবদন্তি এর মূল <details> জন্য। সারাংশটি সর্বদা প্রদর্শিত হয়, একটি বোতাম হিসাবে কাজ করে যা পিতামাতার বাকি বিষয়বস্তু প্রদর্শনকে টগল করে। <summary> এর সাথে ইন্টারঅ্যাক্ট করা <details> ' উপাদানের open বৈশিষ্ট্য টগল করে স্ব-লেবেলযুক্ত সারাংশ ভাইবোনের প্রদর্শনকে টগল করে।

open অ্যাট্রিবিউট হল একটি বুলিয়ান অ্যাট্রিবিউট। যদি উপস্থিত থাকে, মান বা অভাব যাই হোক না কেন, এটি নির্দেশ করে যে সমস্ত <details> বিষয়বস্তু ব্যবহারকারীকে দেখানো হয়েছে। open অ্যাট্রিবিউট না থাকলে, শুধুমাত্র <summary> -এর বিষয়বস্তু দেখানো হয়।

যেহেতু ব্যবহারকারী নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে open বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে যুক্ত এবং সরানো হয়, তাই এটির অবস্থার উপর ভিত্তি করে উপাদানটিকে আলাদাভাবে স্টাইল করতে এটি CSS-এ ব্যবহার করা যেতে পারে।

আপনি একাধিক <details> উপাদানগুলির একটি তালিকা সহ একটি অ্যাকর্ডিয়ন তৈরি করতে পারেন, প্রতিটিতে একটি <summary> চাইল্ড। আপনার এইচটিএমএল-এ open অ্যাট্রিবিউট বাদ দেওয়ার অর্থ হল <details> পৃষ্ঠাটি লোড হওয়ার সময় শুধুমাত্র সংক্ষিপ্ত শিরোনামগুলি দৃশ্যমান সহ সবগুলি ভেঙে যাবে বা বন্ধ হয়ে যাবে; প্রতিটি শিরোনাম প্যারেন্ট <details> এর বাকি বিষয়বস্তুর জন্য ওপেনার হচ্ছে। আপনি যদি আপনার HTML-এ open অ্যাট্রিবিউটটি অন্তর্ভুক্ত করেন, তাহলে পৃষ্ঠাটি লোড হলে <details> রেন্ডার প্রসারিত হয়, বিষয়বস্তু দৃশ্যমান হয়।

সঙ্কুচিত অবস্থায় লুকানো বিষয়বস্তু কিছু ব্রাউজারে অনুসন্ধানযোগ্য কিন্তু অন্যগুলিতে নয়, যদিও ধসে পড়া সামগ্রীটি DOM-এর অংশ নয়৷ আপনি যদি এজ বা ক্রোমে অনুসন্ধান করেন, একটি অনুসন্ধান শব্দ সম্বলিত বিবরণ ঘটনাটি প্রদর্শন করতে প্রসারিত হয়। এই আচরণটি ফায়ারফক্স বা সাফারিতে প্রতিলিপি করা হয় না।

<summary> একটি <details> উপাদানের প্রথম সন্তান হতে হবে, যা প্যারেন্ট <details> উপাদানের বাকি বিষয়বস্তুর জন্য একটি সারাংশ, ক্যাপশন বা কিংবদন্তি প্রতিনিধিত্ব করে যেখানে এটি নেস্ট করা হয়েছে। <summary> উপাদানের বিষয়বস্তু কোনো শিরোনাম বিষয়বস্তু, প্লেইন টেক্সট, বা HTML হতে পারে যা একটি অনুচ্ছেদের মধ্যে ব্যবহার করা যেতে পারে।

সারাংশ চিহ্নিতকারী টগল করুন

আগের দুটি কোডপেনে, সারাংশের ইনলাইন-স্টার্ট সাইডে একটি তীর রয়েছে। একটি বর্ধিত তীর সাধারণত পর্দায় উপস্থাপিত হয়, একটি ছোট ত্রিভুজ যা খোলা বা বন্ধ অবস্থা এবং ত্রিভুজের পাশে একটি লেবেল নির্দেশ করতে ঘোরে (বা মোচড় দেয়)। <summary> উপাদানের বিষয়বস্তু ডিসক্লোজার উইজেট লেবেল করে।

প্রতিটি বিভাগের শীর্ষে ঘূর্ণায়মান তীরটি হল একটি ::marker <summary> উপাদানে সেট করা। তালিকা আইটেমগুলির মতো, <summary> উপাদানটি list-style শর্টহ্যান্ড বৈশিষ্ট্য এবং list-style-type সহ এর লংহ্যান্ড বৈশিষ্ট্যগুলিকে সমর্থন করে। আপনি CSS-এর সাহায্যে ডিসক্লোজার ত্রিভুজ স্টাইল করতে পারেন, list-style-image সহ একটি চিত্র সহ ত্রিভুজ থেকে অন্য যেকোনো বুলেট টাইপে ব্যবহৃত মার্কার পরিবর্তন করা সহ।

অন্যান্য শৈলী প্রয়োগ করতে, details summary::marker অনুরূপ একটি নির্বাচক ব্যবহার করুন। ::marker সিউডো-এলিমেন্ট শুধুমাত্র সীমিত সংখ্যক শৈলী গ্রহণ করে। ::marker অপসারণ করা এবং সহজ-থেকে-শৈলী ::before এটিকে প্রতিস্থাপন করা একটি সাধারণ অভ্যাস, CSS শৈলীগুলি উন্মুক্ত বৈশিষ্ট্যের উপস্থিতি (বা অনুপস্থিতি) এর উপর ভিত্তি করে তৈরি করা বিষয়বস্তুর স্টাইলকে সামান্য পরিবর্তন করে। আপনি list-style: none বা মার্কারের বিষয়বস্তুকে none সেট করবেন না, তবে আপনার সর্বদা দৃশ্যমান ব্যবহারকারীদের জানানোর জন্য ভিজ্যুয়াল সূচক অন্তর্ভুক্ত করা উচিত যে সারাংশ বিষয়বস্তু সামগ্রী দেখানো এবং লুকানোর জন্য টগল করে।

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

এই উদাহরণটি ডিফল্ট মার্কারকে সরিয়ে দেয় এবং একটি + যখন বিশদটি বন্ধ থাকে এবং একটি - যখন বিশদ খোলা থাকে তখন তৈরি করতে তৈরি সামগ্রী যোগ করে।

আপনি যদি ডিফল্টরূপে বিশদ ব্লক খোলা চান, খোলার <details> ট্যাগে open বৈশিষ্ট্য অন্তর্ভুক্ত করুন। আপনি প্রতিটি ডায়ালগের মধ্যে স্থান যোগ করতে পারেন এবং চেহারা উন্নত করতে জেনারেট করা বিষয়বস্তু দিয়ে তৈরি মার্কারটির ঘূর্ণন পরিবর্তন করতে পারেন:

কিভাবে ত্রুটি পরিচালনা করা হয়

আপনি একটি <summary> অন্তর্ভুক্ত না করলে, ব্রাউজার আপনার জন্য একটি মার্কার এবং "বিস্তারিত" শব্দ সহ একটি তৈরি করে। এই সারাংশটি একটি ছায়া রুটের অংশ, এবং তাই লেখক CSS সারাংশ শৈলী প্রয়োগ করা হয় না।

আপনি যদি একটি <summary> অন্তর্ভুক্ত করেন, কিন্তু এটি <details> এ প্রথম উপাদান না হয়, ব্রাউজার এখনও সারসংক্ষেপটি যেমন দেখাতে হবে তেমনভাবে প্রদর্শন করে। আপনি যদি সারাংশের মধ্যে একটি লিঙ্ক, লেবেল বা অন্যান্য ইন্টারেক্টিভ উপাদান অন্তর্ভুক্ত করেন তবে এটি ব্যর্থ হবে না তবে ব্রাউজারগুলি ইন্টারেক্টিভ সামগ্রীর মধ্যে ইন্টারেক্টিভ সামগ্রীকে ভিন্নভাবে পরিচালনা করে।

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

HTMLDetailsElement ইন্টারফেস

সমস্ত HTML উপাদানগুলির মতো, HTMLDetailsElement HTMLElement থেকে সমস্ত বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্টগুলিকে উত্তরাধিকারী করে এবং open ইনস্ট্যান্স প্রপার্টি এবং একটি toggle ইভেন্ট যোগ করে৷ HTMLDetailsElement.open প্রপার্টি হল একটি বুলিয়ান মান যা open HTML অ্যাট্রিবিউটকে প্রতিফলিত করে, যা নির্দেশ করে যে উপাদানের বিষয়বস্তু ( <summary> গণনা না করে) ব্যবহারকারীকে দেখানো হবে কিনা। যখন <details> উপাদান খোলা বা বন্ধ টগল করা হয় তখন টগল ইভেন্টটি চালু হয়। আপনি addEventListener() ব্যবহার করে এই ইভেন্টটি শুনতে পারেন।

ব্যবহারকারী অন্য কোনো বিশদ খোলে খোলা বিশদ বন্ধ করার জন্য যদি আপনি একটি স্ক্রিপ্ট লিখতে চান, removeAttribute("open") ব্যবহার করে ওপেন অ্যাট্রিবিউটটি সরিয়ে দিন :

এটি জাভাস্ক্রিপ্ট ব্যবহার করার একমাত্র উদাহরণ। অন্যান্য উন্মুক্ত উইজেটগুলি বন্ধ করা ছাড়া আপনার সম্ভবত জাভাস্ক্রিপ্টের প্রয়োজন নেই।

মনে রাখবেন, <details> এবং <summary> ভারীভাবে স্টাইল করা যেতে পারে এবং এমনকি টুলটিপ তৈরি করতেও ব্যবহার করা যেতে পারে। কিন্তু, যদি আপনি এই শব্দার্থিক উপাদানগুলি ব্যবহার করার ক্ষেত্রে ব্যবহার করতে যাচ্ছেন যেখানে নেটিভ শব্দার্থ একটি অমিল, সর্বদা অ্যাক্সেসযোগ্যতা বজায় রাখুন । বেশিরভাগ অংশের জন্য এইচটিএমএল ডিফল্টভাবে অ্যাক্সেসযোগ্য। ডেভেলপার হিসেবে আমাদের কাজ হল আমাদের বিষয়বস্তু যাতে অ্যাক্সেসযোগ্য থাকে তা নিশ্চিত করা।

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

বিশদ এবং সারাংশ সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।