JavaScript Components

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

Foundation ফ্রেমওয়ার্কের JavaScript কম্পোনেন্টগুলো সম্পূর্ণরূপে Sass এবং CSS এর সাথে একত্রীকৃত, এবং jQuery ব্যবহার করে সক্রিয় করা হয়। নিচে Foundation ফ্রেমওয়ার্কের কিছু গুরুত্বপূর্ণ JavaScript কম্পোনেন্টের বর্ণনা দেওয়া হলো।

১. Modals (মডাল)

Modals হল পপ-আপ উইন্ডো যা একটি নির্দিষ্ট কন্টেন্ট বা ফর্ম প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি সাধারণ পপ-আপ যেটি সাধারণত ব্যবহারকারীর একশন বা কনফার্মেশন নিতে ব্যবহৃত হয়।

মডাল ব্যবহারের উদাহরণ:

<button class="button" data-open="modal1">Open Modal</button>

<div class="reveal" id="modal1" data-reveal>
  <h1>মডাল শিরোনাম</h1>
  <p>এটি একটি মডাল কনটেন্ট উদাহরণ।</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• data-open="modal1": বাটন ক্লিক করলে মডাল খোলার জন্য এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
• data-reveal: মডাল উইন্ডো দেখানোর জন্য।

মডাল সক্রিয় করার জন্য JavaScript:

$(document).foundation();

২. Dropdowns (ড্রপডাউন)

Dropdowns হল এমন একটি কম্পোনেন্ট, যা ব্যবহারকারীদের একটি বাটনের মাধ্যমে একাধিক অপশন বা মেনু দেখাতে সাহায্য করে। সাধারণত navbar বা menus-এ ব্যবহৃত হয়।

ড্রপডাউন ব্যবহারের উদাহরণ:

<button class="button dropdown" data-toggle="dropdown1">Dropdown Button</button>
<ul class="dropdown menu" id="dropdown1" data-dropdown-menu>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>
</ul>

এখানে:

• data-toggle="dropdown1": বাটনে ক্লিক করলে ড্রপডাউন মেনু খোলা হবে।
• data-dropdown-menu: ড্রপডাউন মেনুর জন্য এই ক্লাস ব্যবহার করা হয়েছে।

ড্রপডাউন সক্রিয় করার জন্য JavaScript:

$(document).foundation();

৩. Accordions (অ্যাকর্ডিয়ন)

Accordions হল এমন একটি কম্পোনেন্ট যা বিভিন্ন সেকশন বা কন্টেন্টের মধ্যে একটি একসাথে একটি সেকশন খোলার সুবিধা প্রদান করে। এটি সাধারণত FAQ বা বিস্তারিত কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়।

অ্যাকর্ডিয়ন ব্যবহারের উদাহরণ:

<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Section 1</a>
    <div class="accordion-content" data-tab-content>
      <p>এটি সেকশন ১ এর কন্টেন্ট।</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Section 2</a>
    <div class="accordion-content" data-tab-content>
      <p>এটি সেকশন ২ এর কন্টেন্ট।</p>
    </div>
  </li>
</ul>

এখানে:

• data-accordion: অ্যাকর্ডিয়ন ফিচার সক্রিয় করার জন্য এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
• data-accordion-item: প্রতিটি অ্যাকর্ডিয়ন আইটেমের জন্য ব্যবহৃত।

অ্যাকর্ডিয়ন সক্রিয় করার জন্য JavaScript:

$(document).foundation();

৪. Tooltips (টুলটিপস)

Tooltips হল ছোট ইনফরমেশন বক্স যা একটি এলিমেন্টের ওপর মাউস হোভার করলে প্রদর্শিত হয়। এটি সাধারণত ব্যবহারকারীকে কিছু অতিরিক্ত তথ্য জানাতে ব্যবহৃত হয়।

টুলটিপ ব্যবহারের উদাহরণ:

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip">Hover me</button>

এখানে:

• data-tooltip: টুলটিপ চালু করার জন্য এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
• title="This is a tooltip": টুলটিপের টেক্সট।

টুলটিপ সক্রিয় করার জন্য JavaScript:

$(document).foundation();

৫. Carousels (কারাউসেল)

Carousels হলো স্লাইডার বা গ্যালারি, যা বিভিন্ন ছবি বা কন্টেন্ট প্রদর্শন করতে সহায়তা করে। এটি সাধারণত ওয়েবসাইটে ছবির স্লাইড শো তৈরি করতে ব্যবহৃত হয়।

কারাউসেল ব্যবহারের উদাহরণ:

<div class="orbit" role="region" aria-label="Image Gallery" data-orbit>
  <ul class="orbit-container">
    <li class="is-active orbit-slide">
      <img src="image1.jpg" alt="Slide 1">
    </li>
    <li class="orbit-slide">
      <img src="image2.jpg" alt="Slide 2">
    </li>
    <li class="orbit-slide">
      <img src="image3.jpg" alt="Slide 3">
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"></button>
    <button data-slide="1"></button>
    <button data-slide="2"></button>
  </nav>
</div>

এখানে:

• data-orbit: কারাউসেল ফিচার সক্রিয় করার জন্য এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে।

কারাউসেল সক্রিয় করার জন্য JavaScript:

$(document).foundation();

৬. Sticky (স্টিকি)

Sticky হল এমন একটি কম্পোনেন্ট যা একটি এলিমেন্টকে পেজ স্ক্রল করার সময় স্ক্রিনের উপর স্থির (stick) রাখে। এটি সাধারণত নেভিগেশন বার বা হেডার এলিমেন্টে ব্যবহৃত হয়।

স্টিকি ব্যবহারের উদাহরণ:

<div class="sticky" data-sticky>
  <p>This element will stick to the top when you scroll down.</p>
</div>

এখানে:

• data-sticky: স্টিকি ফিচার সক্রিয় করার জন্য।

স্টিকি সক্রিয় করার জন্য JavaScript:

$(document).foundation();

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

Foundation ফ্রেমওয়ার্কে শুধুমাত্র CSS এবং HTML স্টাইলিং নয়, এর JavaScript Componentsও ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে। JavaScript কম্পোনেন্টগুলো ওয়েব পেজে ইন্টারঅ্যাকটিভিটি এবং ডাইনামিক ফিচার যোগ করতে সহায়তা করে, যেমন মডাল, ড্রপডাউন, স্লাইডার, টুলটিপ ইত্যাদি। Foundation-এর JavaScript কম্পোনেন্টগুলো ব্যবহার করে ডেভেলপাররা তাদের ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।

Foundation এর JavaScript Components

Foundation-এর JavaScript কম্পোনেন্টগুলি বিশেষভাবে UI উপাদান এবং ইন্টারঅ্যাকটিভ ফিচার তৈরির জন্য ডিজাইন করা হয়েছে। এই কম্পোনেন্টগুলো ব্যবহার করে ওয়েব পেজগুলোকে ইন্টারঅ্যাকটিভ, রেসপনসিভ, এবং ব্যবহারকারী-বান্ধব করা যায়। Foundation এর JavaScript কম্পোনেন্টগুলোর মধ্যে বেশ কিছু জনপ্রিয় এবং ব্যবহারযোগ্য কম্পোনেন্ট রয়েছে:

১. Modal

Modal একটি পপ-আপ উইন্ডো, যা সাধারণত ইউজারকে গুরুত্বপূর্ণ বার্তা দেখাতে বা ফর্ম পূরণ করতে ব্যবহার করা হয়। Modal ব্যবহারকারীর মেইন কন্টেন্টের উপর ফোকাস করে এবং তাকে অ্যাকশন নেওয়ার জন্য প্রম্পট দেয়।

ব্যবহার:

<button class="button" data-open="myModal">Open Modal</button>

<div class="reveal" id="myModal" data-reveal>
  <h1>Here's a Modal!</h1>
  <p>Some content inside the modal window.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

এখানে, data-open এবং data-reveal অ্যাট্রিবিউটগুলো ব্যবহারকারীর জন্য মডাল উইন্ডো তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়।

২. Dropdown

Dropdown হচ্ছে একটি লিস্ট বা মেনু, যা সাধারণত একাধিক অপশন বা ফাংশন প্রদর্শনের জন্য ব্যবহৃত হয়। ওয়েবসাইটে এটি সাধারণত ন্যাভিগেশন মেনু বা ফিল্টার মেনুর জন্য ব্যবহৃত হয়।

ব্যবহার:

<button class="button" data-toggle="dropdown1">Dropdown</button>
<ul class="dropdown menu" id="dropdown1" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

data-toggle এবং data-dropdown-menu ব্যবহার করে dropdown মেনু তৈরি করা হয়, যা ক্লিক করলে ড্রপডাউন মেনু প্রদর্শিত হবে।

৩. Tooltip

Tooltip হল একটি ছোট টেক্সট বক্স, যা কোনো এলিমেন্টের উপর মাউস রাখা হলে প্রদর্শিত হয়। এটি সাধারণত বোতাম, আইকন, বা লিঙ্কের জন্য সহায়িক তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়।

ব্যবহার:

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!">Hover over me!</button>

data-tooltip ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়, যা মাউস হোভার করলে প্রদর্শিত হবে।

৪. Accordion

Accordion একটি ইন্টারঅ্যাকটিভ কম্পোনেন্ট, যা একাধিক সেকশন বা কন্টেন্টের মধ্যে শুধুমাত্র একটিকে খোলার সুযোগ দেয়। এটি সাধারণত FAQ (Frequently Asked Questions) বা একাধিক কন্টেন্ট সেকশনের জন্য ব্যবহৃত হয়।

ব্যবহার:

<div class="accordion" data-accordion>
  <div class="accordion-item">
    <a href="#" class="accordion-title">Section 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Content for section 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <a href="#" class="accordion-title">Section 2</a>
    <div class="accordion-content" data-tab-content>
      <p>Content for section 2</p>
    </div>
  </div>
</div>

এখানে data-accordion এবং data-tab-content ব্যবহার করা হয় যাতে একাধিক সেকশন থাকে এবং শুধুমাত্র একটি সেকশন খোলা থাকে।

৫. Carousel (Slick Slider)

Carousel বা Slick Slider একটি স্লাইডিং গ্যালারি বা ছবি পরিবর্তন করার কম্পোনেন্ট, যা সাধারণত ইমেজ গ্যালারী বা প্রোডাক্ট স্লাইডশো তৈরি করার জন্য ব্যবহৃত হয়।

ব্যবহার:

<div class="carousel" data-carousel>
  <div class="carousel-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>

data-carousel ব্যবহার করে একটি স্লাইডশো তৈরি করা যায়, যা ব্যবহারকারীকে একের পর এক ইমেজ দেখতে সাহায্য করে।

৬. Tabs

Tabs কম্পোনেন্টটি ব্যবহারকারীর জন্য একাধিক পেজ বা কনটেন্ট সেকশন একসাথে প্রদর্শন করার উপায় দেয়। সাধারণত এটি কন্টেন্ট বিভাগ বা সেটিংস প্যানেল তৈরি করার জন্য ব্যবহৃত হয়।

ব্যবহার:

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1">Panel 1</a></li>
  <li class="tabs-title"><a href="#panel2">Panel 2</a></li>
  <li class="tabs-title"><a href="#panel3">Panel 3</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Content for panel 1</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Content for panel 2</p>
  </div>
  <div class="tabs-panel" id="panel3">
    <p>Content for panel 3</p>
  </div>
</div>

data-tabs এবং data-tabs-content ব্যবহার করে সহজেই ট্যাব তৈরি করা যায়, যা কন্টেন্টকে বিভিন্ন প্যানেলে ভাগ করে।

Foundation এর JavaScript Components এর ভূমিকা

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

Foundation এর JavaScript কম্পোনেন্টগুলি একটি ওয়েবসাইটের ডিজাইনকে ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে, যার ফলে ব্যবহারকারীরা ওয়েবসাইটের সাথে সহজে ইন্টারঅ্যাক্ট করতে পারে।

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

Foundation এ Modals তৈরি এবং কাস্টমাইজ করা সহজ, এবং এর জন্য Reveal নামক একটি ফিচার ব্যবহার করা হয়। এটি একটি JavaScript প্লাগইন, যা সহজেই কার্যকরী মডাল উইন্ডো তৈরি করতে সহায়তা করে।

১. Modals তৈরি করা

Foundation এ একটি মডাল তৈরি করার জন্য নিচে দেয়া ধাপগুলো অনুসরণ করুন:

মডাল HTML স্ট্রাকচার:

<!-- Trigger Button -->
<button class="button" data-open="myModal">Open Modal</button>

<!-- Modal -->
<div class="reveal" id="myModal" data-reveal>
  <h1>Welcome to the Modal!</h1>
  <p>This is a simple modal using Foundation's Reveal plugin.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• data-open: মডালটি খুলতে ব্যবহৃত বাটন। এই বাটনে ক্লিক করলে মডালটি খোলা হবে।
• reveal: এটি মডাল উইন্ডোর জন্য একটি ফাউন্ডেশন ক্লাস।
• data-reveal: মডাল উইন্ডোকে চিহ্নিত করে, যা Foundation এর Reveal প্লাগইন দ্বারা পরিচালিত হয়।
• data-close: মডাল বন্ধ করার জন্য ব্যবহৃত ক্লাস। এটি মডাল উইন্ডো বন্ধ করতে সাহায্য করবে।

উদাহরণে:

• <button class="button" data-open="myModal">Open Modal</button>: এই বাটনে ক্লিক করলে myModal আইডির মডাল উইন্ডোটি খোলা হবে।
• <div class="reveal" id="myModal" data-reveal>: এটি মূল মডাল উইন্ডো যা একটি শিরোনাম (h1), প্যারাগ্রাফ (p), এবং ক্লোজ বাটন (button) ধারণ করবে।

২. Modals-এ JavaScript ব্যবহার

Foundation এর Reveal প্লাগইন JavaScript দ্বারা পরিচালিত হয়। একে ইনিশিয়ালাইজ করতে Foundation এর JavaScript ফাইল লোড করতে হয়। এর জন্য jQuery এবং Foundation এর JavaScript ফাইল প্রয়োজন।

Foundation JavaScript এবং jQuery সঠিকভাবে লোড করার জন্য নিম্নলিখিত কোডটি আপনার HTML ডকুমেন্টের মধ্যে যুক্ত করুন:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Foundation JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>

<script>
  $(document).foundation();
</script>

এটি Foundation এর Reveal প্লাগইন এবং অন্যান্য ফিচার কাজ করার জন্য যথাযথভাবে ইনিশিয়ালাইজ করবে।

৩. Modals কাস্টমাইজেশন

Foundation এ Modals কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন মডালের আকার, প্রস্থ, এনিমেশন, এবং কন্টেন্ট পরিবর্তন করা।

কাস্টম সাইজ এবং স্টাইল:

Foundation-এ মডাল উইন্ডোর আকার কাস্টমাইজ করা খুব সহজ। এর জন্য small, medium, large, full ক্লাস ব্যবহার করা হয়।

<!-- Small Modal -->
<div class="reveal small" id="smallModal" data-reveal>
  <h1>Small Modal</h1>
  <p>This is a small modal example.</p>
  <button class="button" data-close>Close</button>
</div>

<!-- Large Modal -->
<div class="reveal large" id="largeModal" data-reveal>
  <h1>Large Modal</h1>
  <p>This is a large modal example.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• small: ছোট আকারের মডাল উইন্ডো।
• large: বড় আকারের মডাল উইন্ডো।

Foundation এর ডিফল্ট সাইজের বাইরে full ক্লাস ব্যবহার করে পুরো স্ক্রীন মডাল তৈরি করা যায়।

মডালটিতে এনিমেশন যুক্ত করা:

Foundation এর Reveal প্লাগইনে fade ক্লাস যুক্ত করলে মডালটি ধীরে ধীরে প্রদর্শিত হয়।

<div class="reveal fade" id="animatedModal" data-reveal>
  <h1>Animated Modal</h1>
  <p>This modal will fade in when opened.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• fade: এটি মডাল উইন্ডোতে ফেড ইন বা আউট এনিমেশন যোগ করবে।

ক্লোজ বাটনে কাস্টমাইজেশন:

Foundation মডালের ক্লোজ বাটনটি data-close ক্লাস দ্বারা পরিচালিত হয়। আপনি এটি কাস্টমাইজ করতে পারেন, যেমন রঙ পরিবর্তন বা আকার পরিবর্তন।

<button class="button alert" data-close>Close</button>

এখানে, ক্লোজ বাটনের রঙ পরিবর্তন করা হয়েছে alert ক্লাস ব্যবহার করে।

৪. Modals এর কাস্টম বৈশিষ্ট্য

Foundation এর Reveal প্লাগইন কিছু অতিরিক্ত কাস্টম বৈশিষ্ট্যও প্রদান করে:

• data-close ক্লাস ব্যবহার করে মডালটি বন্ধ করা যায়।
• auto-focus বৈশিষ্ট্য ব্যবহার করে মডালের ভিতরের প্রথম ইনপুট এলিমেন্টে ফোকাস দেওয়া যায়।
• close-on-click ফিচারটি ব্যবহার করে মডালের বাইরের অংশে ক্লিক করলে মডালটি বন্ধ হয়ে যাবে।

উদাহরণ:

<div class="reveal" id="myModal" data-reveal data-close-on-click="true">
  <h1>Auto-close Modal</h1>
  <p>Click outside the modal to close it.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• data-close-on-click="true": মডালের বাইরের অংশে ক্লিক করলে এটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

Foundation ফ্রেমওয়ার্কের Modals তৈরি করা এবং কাস্টমাইজেশন করা খুবই সহজ এবং কার্যকর। এর Reveal প্লাগইন ব্যবহার করে আপনি মডাল উইন্ডো তৈরি করতে পারেন এবং সেটি কাস্টমাইজ করতে পারেন। Modals বিভিন্ন আকার, এনিমেশন, এবং কাস্টম ফিচারের সাথে আপনার ওয়েবসাইটে উন্নত এবং পেশাদার ইন্টারফেস প্রদান করে। Foundation এর মডাল সিস্টেম সহজ, কার্যকরী এবং রেসপনসিভ ডিজাইনের জন্য উপযুক্ত।

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 এ এই কম্পোনেন্টগুলির জন্য সোজা কাস্টম ক্লাস এবং কার্যকরী কোডিং ব্যবহার করা যায়, যা রেসপনসিভ ডিজাইনেও সহায়তা করে।

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

১. Tooltips

Tooltips হল ছোট তথ্য বক্স যা মাউস হোভার বা ফোকাস করার মাধ্যমে প্রদর্শিত হয়। এটি ব্যবহারকারীকে কোন এলিমেন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়।

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

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!">Hover me!</button>

এখানে:

• data-tooltip: এটি টুলটিপ ফিচারটি সক্রিয় করে।
• title: টুলটিপের কন্টেন্ট যা ব্যবহারকারী মাউস হোভার করলে দেখাবে।
• has-tip: টুলটিপের জন্য Foundation এর CSS ক্লাস।

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

• Positioning: টুলটিপগুলি বিভিন্ন স্থানে (যেমন: উপরে, নিচে, বামে, ডানে) প্রদর্শিত হতে পারে, যা ব্যবহারকারীকে সবচেয়ে সুবিধাজনক অবস্থানে দেখানোর জন্য কাস্টমাইজ করা যায়।
• Interactive: ব্যবহারকারী যখন মাউস কার্সর নির্দিষ্ট এলিমেন্টের ওপর রাখেন, তখন টুলটিপ প্রদর্শিত হয়।
• Accessibility: টুলটিপকে অ্যাক্সেসযোগ্য করার জন্য aria-haspopup এবং title অ্যাট্রিবিউট ব্যবহার করা হয়।

Tooltips কাস্টমাইজ করা:

<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!" data-position="top">Hover me!</button>

এখানে, data-position="top" এর মাধ্যমে টুলটিপের অবস্থান শীর্ষে পরিবর্তিত করা হয়েছে।

২. Dropdowns

Dropdowns হল একটি ইন্টারঅ্যাকটিভ মেনু যা ব্যবহারকারীকে একাধিক অপশন থেকে একটি নির্বাচন করার সুযোগ দেয়। এটি সাধারণত ফর্ম বা নেভিগেশন মেনুতে ব্যবহৃত হয়, যেখানে কম্প্যাক্টভাবে অনেক অপশন প্রদর্শন করা হয়।

Dropdowns ব্যবহারের উদাহরণ:

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="has-dropdown">
    <a href="#">Services</a>
    <ul class="dropdown menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে:

• data-dropdown-menu: এটি dropdown মেনুর জন্য Foundation JavaScript সক্রিয় করে।
• has-dropdown: এটি dropdown মেনু আইটেমের জন্য ব্যবহৃত হয়।
• dropdown menu: এটি মেনুর জন্য CSS ক্লাস যা dropdown উপাদান তৈরি করে।

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

• Interactive: ব্যবহারকারী যখন মেনু আইটেমের উপর হোভার বা ক্লিক করে, তখন ড্রপডাউন মেনু প্রদর্শিত হয়।
• Nested Dropdowns: ড্রপডাউন মেনুর মধ্যে সাব-ড্রপডাউন মেনু তৈরি করা যায়, যেমন উপরের উদাহরণে Services এর অধীনে আরো সাব-আইটেম রয়েছে।
• Responsive: Foundation এর ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য রেসপনসিভভাবে প্রদর্শিত হয়।

Dropdowns কাস্টমাইজ করা:

<ul class="dropdown menu" data-dropdown-menu data-alignment="right">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="has-dropdown">
    <a href="#">Services</a>
    <ul class="dropdown menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে, data-alignment="right" এর মাধ্যমে ড্রপডাউন মেনুর অবস্থান ডান দিকে পরিবর্তিত করা হয়েছে।

Tooltips এবং Dropdowns এর মধ্যে পার্থক্য

Tooltips এবং Dropdowns হল Foundation ফ্রেমওয়ার্কের দুইটি গুরুত্বপূর্ণ ইউজার ইন্টারফেস কম্পোনেন্ট। Tooltips ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে এবং Dropdowns ব্যবহারকারীদের একাধিক অপশন থেকে একটি নির্বাচন করতে সাহায্য করে। Foundation এ এই কম্পোনেন্টগুলো সহজে কাস্টমাইজ করা যায় এবং রেসপনসিভ ডিজাইন নিশ্চিত করা যায়, যা ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে তোলে।