Tabs এবং Accordion এর ব্যবহার

Foundation ফ্রেমওয়ার্কে Tabs এবং Accordion হল দুটি জনপ্রিয় ইউজার ইন্টারফেস (UI) কম্পোনেন্ট, যা ওয়েব পেজে কনটেন্টের মধ্যে সিস্টেম্যাটিকভাবে পরিবর্তনযোগ্য সেকশনের জন্য ব্যবহৃত হয়। এগুলো মূলত একাধিক কন্টেন্ট সেকশনকে একটি ছোট জায়গায় উপস্থাপন করতে সাহায্য করে, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং সুবিধাজনক অভিজ্ঞতা তৈরি করে।

১. Tabs এর ব্যবহার

Tabs কম্পোনেন্ট ব্যবহার করে আপনি একাধিক কন্টেন্ট সেকশনকে ট্যাব ফর্মে প্রদর্শন করতে পারেন। ব্যবহারকারী ট্যাবের উপর ক্লিক করলে সংশ্লিষ্ট কন্টেন্ট সেকশন দেখানো হয়। এটি সাধারণত তথ্য প্রেজেন্টেশন বা ফিচার প্রোফাইল প্রদর্শনে ব্যবহার করা হয়।

Tabs ব্যবহার করার উদাহরণ:

<div class="tabs" data-tabs id="example-tabs">
  <ul class="tabs-title">
    <li class="tabs-item is-active"><a href="#panel1">ট্যাব ১</a></li>
    <li class="tabs-item"><a href="#panel2">ট্যাব ২</a></li>
    <li class="tabs-item"><a href="#panel3">ট্যাব ৩</a></li>
  </ul>
  <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
      <p>এটি ট্যাব ১ এর কন্টেন্ট।</p>
    </div>
    <div class="tabs-panel" id="panel2">
      <p>এটি ট্যাব ২ এর কন্টেন্ট।</p>
    </div>
    <div class="tabs-panel" id="panel3">
      <p>এটি ট্যাব ৩ এর কন্টেন্ট।</p>
    </div>
  </div>
</div>

এখানে:

• data-tabs এবং data-tabs-content ব্যবহার করে ট্যাবগুলো এবং কন্টেন্ট প্যানেলগুলো একে অপরের সাথে যুক্ত হয়।
• is-active ক্লাসটি ব্যবহারকারী যখন কোন ট্যাব বা প্যানেলে ক্লিক করবে, তখন সেটি সক্রিয় হয়ে যাবে এবং কন্টেন্ট প্রদর্শিত হবে।

Tabs এর বৈশিষ্ট্য:

• একাধিক ট্যাবের মধ্যে দ্রুত নেভিগেট করা যায়।
• ব্যবহারকারীরা একই পৃষ্ঠায় একাধিক বিষয়বস্তুর মধ্যে পরিবর্তন করতে পারেন।
• Foundation-এ এটি স্বয়ংক্রিয়ভাবে রেসপনসিভ এবং মোবাইল ফ্রেন্ডলি।

২. Accordion এর ব্যবহার

Accordion কম্পোনেন্টটি একাধিক কন্টেন্ট সেকশনের মধ্যে কেবল একটি সেকশন প্রদর্শন করতে সহায়তা করে। ব্যবহারকারী যখন এক সেকশন খোলেন, তখন অন্য সেকশনটি বন্ধ হয়ে যায়। এটি সাধারণত FAQ পৃষ্ঠাতে বা যেখানে সীমিত জায়গায় তথ্য প্রদান করতে হয়, সেখানে ব্যবহৃত হয়।

Accordion ব্যবহার করার উদাহরণ:

<div class="accordion" data-accordion>
  <div class="accordion-item">
    <a href="#" class="accordion-title">প্রথম প্রশ্ন</a>
    <div class="accordion-content" data-tab-content>
      <p>এটি প্রথম প্রশ্নের উত্তর।</p>
    </div>
  </div>
  <div class="accordion-item">
    <a href="#" class="accordion-title">দ্বিতীয় প্রশ্ন</a>
    <div class="accordion-content" data-tab-content>
      <p>এটি দ্বিতীয় প্রশ্নের উত্তর।</p>
    </div>
  </div>
  <div class="accordion-item">
    <a href="#" class="accordion-title">তৃতীয় প্রশ্ন</a>
    <div class="accordion-content" data-tab-content>
      <p>এটি তৃতীয় প্রশ্নের উত্তর।</p>
    </div>
  </div>
</div>

এখানে:

• data-accordion এবং data-tab-content অ্যাট্রিবিউট ব্যবহার করে এটি একটি একক অ্যাকর্ডিয়ন তৈরি করা হয়।
• প্রতিটি accordion-item একটি শিরোনাম (question) এবং কনটেন্ট (answer) ধারণ করে।
• ব্যবহারকারী যখন একটি প্রশ্নের শিরোনামে ক্লিক করবেন, তখন সংশ্লিষ্ট কনটেন্টটি দৃশ্যমান হবে।

Accordion এর বৈশিষ্ট্য:

• এটি একাধিক কন্টেন্ট সেকশনের মধ্যে স্থান সংরক্ষণে সহায়তা করে।
• শুধুমাত্র একটিমাত্র সেকশন একসাথে খোলা থাকে, অন্যান্য সেকশন বন্ধ থাকে।
• Foundation-এ এটি রেসপনসিভ এবং মোবাইল-ফার্স্ট ডিজাইনে খুবই কার্যকর।

Tabs এবং Accordion এর মধ্যে পার্থক্য

Foundation ফ্রেমওয়ার্কের Tabs এবং Accordion কম্পোনেন্টগুলি খুবই কার্যকরী এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। Tabs ব্যবহারকারীদের একাধিক কন্টেন্ট সেকশন দ্রুত পরিবর্তন করতে সাহায্য করে, যেখানে Accordion একাধিক প্রশ্ন বা সেকশনকে এক জায়গায় সুশৃঙ্খলভাবে রাখে। Foundation এ এই কম্পোনেন্টগুলির জন্য সোজা কাস্টম ক্লাস এবং কার্যকরী কোডিং ব্যবহার করা যায়, যা রেসপনসিভ ডিজাইনেও সহায়তা করে।