Bulma এর অ্যাডভান্সড Components

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

১. Modal

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

উদাহরণ: Basic Modal

<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p>Here is some content inside the modal!</p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<button class="button is-primary" onclick="document.getElementById('modal').classList.add('is-active')">Open Modal</button>

এখানে:

• modal ক্লাসটি মডাল উইন্ডো তৈরি করে।
• modal-background এবং modal-content ক্লাসগুলি মডাল উইন্ডোর ব্যাকগ্রাউন্ড এবং কন্টেন্ট সেগমেন্ট নির্ধারণ করে।
• JavaScript দিয়ে মডালটি সক্রিয় বা নিষ্ক্রিয় করা যায়।

২. Tabs

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

উদাহরণ: Basic Tabs

<div class="tabs">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-1">
    <p>This is the content of Tab 1.</p>
  </div>
  <div class="tab-2">
    <p>This is the content of Tab 2.</p>
  </div>
  <div class="tab-3">
    <p>This is the content of Tab 3.</p>
  </div>
</div>

এখানে:

• tabs ক্লাসটি ট্যাব তৈরি করে এবং is-active ক্লাসটি প্রথম ট্যাবটিকে সক্রিয় করে।
• প্রতিটি ট্যাবের জন্য আলাদা কন্টেন্ট সেগমেন্ট থাকতে পারে, যা JavaScript দ্বারা সিলেক্ট করা যায়।

৩. Accordion

Bulma এর Accordion কম্পোনেন্টটি একাধিক কন্টেন্ট সেগমেন্টকে ভাঁজ (foldable) আকারে উপস্থাপন করতে ব্যবহৃত হয়, যাতে ব্যবহারকারী কন্টেন্টটি বিস্তারিতভাবে দেখতে পারে। এটি একটি খুবই জনপ্রিয় UI প্যাটার্ন যেখানে কন্টেন্টগুলো ক্লিক করে খুলতে বা বন্ধ করতে পারেন।

উদাহরণ: Accordion

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <p>Accordion Item 1</p>
    </div>
    <div class="accordion-body">
      <p>This is the content inside accordion item 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <p>Accordion Item 2</p>
    </div>
    <div class="accordion-body">
      <p>This is the content inside accordion item 2.</p>
    </div>
  </div>
</div>

এখানে:

• accordion-item ক্লাসটি প্রতিটি একক আউটলাইন বা সেকশনের জন্য ব্যবহৃত হয়।
• JavaScript এর সাহায্যে accordion-body খুলতে বা বন্ধ করতে হয়।

৪. Progress Bar

Bulma এর Progress কম্পোনেন্টটি একটি প্রোগ্রেস বার তৈরি করতে ব্যবহৃত হয়, যা লোডিং বা আপডেট প্রক্রিয়ার অগ্রগতি প্রদর্শন করতে সহায়তা করে। এটি ব্যবহারকারীদের জন্য কোন প্রক্রিয়ার অবস্থান জানানো গুরুত্বপূর্ণ হতে পারে।

উদাহরণ: Progress Bar

<progress class="progress is-primary" value="60" max="100">60%</progress>

এখানে:

• progress ক্লাসটি প্রোগ্রেস বার তৈরি করে।
• value অ্যাট্রিবিউটটি প্রগ্রেসের বর্তমান মান নির্ধারণ করে, এবং max অ্যাট্রিবিউটটি সর্বোচ্চ সীমা নির্ধারণ করে।

৫. Carousel (Image Slider)

Bulma নিজে কোন Carousel বা Image Slider কম্পোনেন্ট সরবরাহ না করলেও, আপনি CSS এবং JavaScript ব্যবহার করে সহজেই Bulma এর সাথে একটি Carousel তৈরি করতে পারেন। এটি সাধারণত ইমেজ বা কন্টেন্ট স্লাইড করে দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ: Basic Image Slider

<div class="carousel">
  <div class="carousel-item is-active">
    <img src="https://via.placeholder.com/600x400" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="https://via.placeholder.com/600x400" alt="Image 2">
  </div>
  <div class="carousel-item">
    <img src="https://via.placeholder.com/600x400" alt="Image 3">
  </div>
</div>

এখানে:

• carousel-item ক্লাসটি প্রতিটি স্লাইড উপাদান বোঝায়।
• JavaScript দিয়ে স্লাইড শিফট করা যায়।

৬. Pagination

Bulma এর Pagination কম্পোনেন্টটি পেজিনেশন তৈরি করতে ব্যবহৃত হয়, যা একটি ওয়েব পৃষ্ঠায় অনেকগুলো আইটেম দেখানোর সময়, বিভিন্ন পেজে ভাগ করার কাজ করে। এটি ব্যবহারকারীদের সহজে পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে সাহায্য করে।

উদাহরণ: Pagination

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a></li>
    <li><a class="pagination-link" aria-label="Page 2">2</a></li>
    <li><a class="pagination-link" aria-label="Page 3">3</a></li>
  </ul>
</nav>

এখানে:

• pagination ক্লাসটি পেজিনেশন তৈরি করে।
• pagination-previous এবং pagination-next ক্লাসগুলি পূর্ববর্তী এবং পরবর্তী পেজের লিঙ্ক তৈরি করে।
• pagination-list এবং pagination-link ক্লাসগুলি পেজ নম্বর দেখাতে ব্যবহৃত হয়।

সারাংশ

Bulma এর অ্যাডভান্সড কম্পোনেন্টগুলি আপনার ওয়েব ডিজাইন এবং ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করতে সহায়তা করে। Modal, Tabs, Accordion, Progress Bar, Carousel, এবং Pagination কম্পোনেন্টগুলি আপনাকে জটিল এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সক্ষম করে। এই কম্পোনেন্টগুলি সহজেই কাস্টমাইজ করা যায় এবং সেগুলি Bulma ফ্রেমওয়ার্কের সাথে খুব ভালভাবে কাজ করে।

Bulma-তে Pagination কম্পোনেন্টটি ব্যবহার করা হয় বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেট করার জন্য। এটি সাধারণত বড় লিস্ট বা ডেটার জন্য ব্যবহার করা হয় যেখানে ইউজারকে একাধিক পৃষ্ঠার মধ্যে নেভিগেট করতে হয়, যেমন ব্লগ পোস্ট, পণ্য তালিকা, সার্চ রেজাল্ট ইত্যাদি। Bulma-তে Pagination কম্পোনেন্টটি খুব সহজে কাস্টমাইজ করা যায় এবং ব্যবহারকারীদের জন্য একটি পরিষ্কার, ইন্টারেক্টিভ এবং রেসপনসিভ পৃষ্ঠা নেভিগেশন ব্যবস্থা তৈরি করতে সহায়ক।

১. Pagination Structure (পেজিনেশন গঠন)

Bulma-তে Pagination কম্পোনেন্টটি একটি pagination ক্লাস দিয়ে শুরু হয়, এবং এর মধ্যে বিভিন্ন লিঙ্ক থাকে যা পৃষ্ঠা পরিবর্তন করতে সহায়ক হয়। সাধারণভাবে এটি pagination-list, pagination-link এবং বিভিন্ন পৃষ্ঠার জন্য pagination-previous এবং pagination-next ক্লাস ধারণ করে।

২. Basic Pagination Example (বেসিক পেজিনেশন উদাহরণ)

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#" disabled>Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link is-current" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link" href="#">3</a></li>
  </ul>
</nav>

এখানে:

• pagination: এটি পেজিনেশন কম্পোনেন্টের কন্টেইনার।
• pagination-previous: পূর্ববর্তী পৃষ্ঠার লিঙ্ক।
• pagination-next: পরবর্তী পৃষ্ঠার লিঙ্ক।
• pagination-list: পৃষ্ঠাগুলির লিস্ট।
• pagination-link: প্রতিটি পৃষ্ঠার জন্য লিঙ্ক।

৩. Pagination with Disabled State (ডিসেবলড স্টেট সহ পেজিনেশন)

কখনও কখনও, একটি নির্দিষ্ট পৃষ্ঠা পাওয়া না গেলে বা আগের বা পরের পৃষ্ঠা অ্যাক্সেসযোগ্য না হলে, আপনাকে পেজিনেশন লিঙ্কগুলোকে ডিসেবলড (অকার্যকর) করতে হতে পারে। Bulma-তে আপনি disabled অ্যাট্রিবিউট ব্যবহার করে এই ফিচারটি অ্যাক্টিভেট করতে পারেন।

উদাহরণ: Disabled Pagination Link

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#" disabled>Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link is-current" href="#">2</a></li>
    <li><a class="pagination-link" href="#">3</a></li>
  </ul>
</nav>

এখানে:

• disabled অ্যাট্রিবিউট ব্যবহার করে আগের পৃষ্ঠার লিঙ্কটি অকার্যকর করা হয়েছে।

৪. Pagination with More Pages (আরও পৃষ্ঠা সহ পেজিনেশন)

যখন আপনার পৃষ্ঠা সংখ্যা বেশি হয়, তখন আপনি pagination-ellipsis ক্লাস ব্যবহার করে আরো পৃষ্ঠা লুকিয়ে রাখতে পারেন, যাতে পেজিনেশন কম্পোনেন্টটি আরও compact থাকে। এটি ইউজারকে অনেক পৃষ্ঠা দেখানোর পরিবর্তে এক্সট্রা পৃষ্ঠা লুকিয়ে রাখার সুবিধা দেয়।

উদাহরণ: Pagination with Ellipsis

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#">Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><span class="pagination-ellipsis">…</span></li>
    <li><a class="pagination-link" href="#">15</a></li>
  </ul>
</nav>

এখানে:

• pagination-ellipsis: এটি পেজিনেশন লিস্টে অতিরিক্ত পৃষ্ঠাগুলোর মধ্যে বিরতি প্রদর্শন করতে ব্যবহৃত হয় (যেমন, পৃষ্ঠা ১ থেকে পৃষ্ঠা ১৫ পর্যন্ত যদি মধ্যবর্তী পৃষ্ঠাগুলি লুকিয়ে রাখতে চান)।

৫. Pagination with Size Modifiers (সাইজ মডিফায়ার সহ পেজিনেশন)

Bulma-তে পেজিনেশন কম্পোনেন্টটির আকার পরিবর্তন করার জন্য is-small এবং is-large ক্লাস ব্যবহার করা যেতে পারে। এটি কম্পোনেন্টের আকার ছোট বা বড় করার জন্য ব্যবহৃত হয়।

উদাহরণ: Small and Large Pagination

<nav class="pagination is-small" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#">Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link is-current" href="#">3</a></li>
  </ul>
</nav>

<nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#">Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link is-current" href="#">3</a></li>
  </ul>
</nav>

এখানে:

• is-small: ছোট আকারের পেজিনেশন।
• is-large: বড় আকারের পেজিনেশন।

৬. Pagination with Center Alignment (মধ্যস্থল সজ্জিত পেজিনেশন)

Bulma-তে পেজিনেশন কম্পোনেন্টকে center করে সজ্জিত করা খুবই সহজ। আপনি is-centered ক্লাস ব্যবহার করে এটি করতে পারেন।

উদাহরণ: Centered Pagination

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#">Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link is-current" href="#">3</a></li>
  </ul>
</nav>

এখানে:

• is-centered: পেজিনেশন কম্পোনেন্টটিকে মধ্যস্থলে স্থানান্তরিত করে।

৭. Pagination with Right Alignment (ডানদিকে সজ্জিত পেজিনেশন)

আপনি চাইলে is-right ক্লাস ব্যবহার করে পেজিনেশন কম্পোনেন্টটিকে ডানদিকে সজ্জিত করতে পারেন।

উদাহরণ: Right-Aligned Pagination

<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#">Previous</a>
  <a class="pagination-next" href="#">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link is-current" href="#">3</a></li>
  </ul>
</nav>

এখানে:

• is-right: পেজিনেশন কম্পোনেন্টটিকে ডানদিকে স্থানান্তরিত করে।

সারাংশ

Bulma-তে Pagination কম্পোনেন্টটি বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন করার জন্য ব্যবহার করা হয়। এটি previous এবং next পৃষ্ঠার লিঙ্ক, pagination-link লিঙ্ক, এবং বিভিন্ন pagination-ellipsis ফিচারসহ কাস্টমাইজ করা যায়। এছাড়া, small ও large সাইজ, centered এবং right-aligned স্টাইলসহ পেজিনেশন কম্পোনেন্টটিকে বিভিন্নভাবে সাজানো সম্ভব। Disabled লিঙ্ক এবং ellipsis ব্যবহারের মাধ্যমে আপনি একটি বেশি ব্যবহারকারী-বান্ধব পেজিনেশন তৈরি করতে পারেন। Bulma-র এই ফিচারগুলি আপনাকে সহজে নেভিগেশন সিস্টেম তৈরি করতে সহায়তা করে।

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

Bulma তে ট্যাব কম্পোনেন্টটি খুবই সহজ এবং ব্যবহারযোগ্য, এবং আপনি static ও dynamic ট্যাব কন্টেন্ট তৈরি করতে পারেন।

১. Basic Tabs Component

Bulma তে Tabs তৈরি করতে tabs ক্লাস ব্যবহার করা হয়। একটি সাধারণ ট্যাব কম্পোনেন্টের মধ্যে is-active ক্লাস ব্যবহার করে সক্রিয় ট্যাব হাইলাইট করা হয়।

উদাহরণ: Basic Tabs

<div class="tabs is-centered">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-1-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content of Tab 1</p>
  </div>
  <div class="tab-2-content" style="display: none;">
    <h2>Content for Tab 2</h2>
    <p>This is the content of Tab 2</p>
  </div>
  <div class="tab-3-content" style="display: none;">
    <h2>Content for Tab 3</h2>
    <p>This is the content of Tab 3</p>
  </div>
</div>

এখানে:

• tabs: ট্যাব কম্পোনেন্টের জন্য কন্টেইনার।
• is-centered: ট্যাবগুলোকে সেন্টারে অ্যালাইন করা হয়।
• is-active: এই ক্লাসটি সক্রিয় (এ্যাকটিভ) ট্যাব চিহ্নিত করে।
• tab-content: ট্যাবের কন্টেন্ট ধারণ করার জন্য কন্টেইনার।
• tab-1-content, tab-2-content, tab-3-content: প্রতিটি ট্যাবের কন্টেন্ট সেকশন।

২. Dynamic Tab Content

Dynamic Tab Content তৈরি করতে JavaScript ব্যবহার করা হয়, যাতে ট্যাব সুইচ করার সময় সংশ্লিষ্ট কন্টেন্টটি দেখানো বা লুকানো যায়। এই ক্ষেত্রে, ব্যবহারকারীর ক্লিকের উপর ভিত্তি করে কন্টেন্ট পরিবর্তন হবে এবং অন্যান্য ট্যাবগুলোর কন্টেন্ট লুকিয়ে যাবে।

উদাহরণ: Dynamic Tab Content with JavaScript

<div class="tabs is-centered">
  <ul>
    <li class="is-active" id="tab-1"><a>Tab 1</a></li>
    <li id="tab-2"><a>Tab 2</a></li>
    <li id="tab-3"><a>Tab 3</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-1-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content of Tab 1</p>
  </div>
  <div class="tab-2-content" style="display: none;">
    <h2>Content for Tab 2</h2>
    <p>This is the content of Tab 2</p>
  </div>
  <div class="tab-3-content" style="display: none;">
    <h2>Content for Tab 3</h2>
    <p>This is the content of Tab 3</p>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tabs ul li');
  const contents = document.querySelectorAll('.tab-content div');

  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      // Remove 'is-active' class from all tabs
      tabs.forEach(tab => tab.classList.remove('is-active'));

      // Hide all tab content
      contents.forEach(content => content.style.display = 'none');

      // Add 'is-active' class to clicked tab
      tab.classList.add('is-active');

      // Display the content for the clicked tab
      const tabId = tab.id;
      document.querySelector(`.${tabId}-content`).style.display = 'block';
    });
  });
</script>

এখানে:

• tabs: সমস্ত ট্যাব এলিমেন্টের জন্য ডকুমেন্ট নির্বাচন করা হয়েছে।
• contents: সমস্ত ট্যাব কন্টেন্ট এলিমেন্ট নির্বাচন করা হয়েছে।
• addEventListener('click'): প্রতিটি ট্যাবের উপর ক্লিক হলে কন্টেন্ট স্যুইচিং ঘটে।
• style.display = 'none': অব্যবহৃত ট্যাব কন্টেন্ট লুকানো হয়।
• style.display = 'block': নির্বাচিত ট্যাবের কন্টেন্ট প্রদর্শিত হয়।

৩. Styling Tabs

Bulma তে Tabs এর স্টাইলিং কাস্টমাইজ করা যায়, যেমন ট্যাবের রঙ, সাইজ, অবস্থান ইত্যাদি। আপনি ক্লাসের মাধ্যমে ট্যাবগুলোর উপস্থিতি পরিবর্তন করতে পারেন, যেমন is-small, is-medium, is-large, is-rounded ইত্যাদি।

উদাহরণ: Customized Tabs with Bulma

<div class="tabs is-boxed is-small is-centered">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-1-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content of Tab 1</p>
  </div>
  <div class="tab-2-content" style="display: none;">
    <h2>Content for Tab 2</h2>
    <p>This is the content of Tab 2</p>
  </div>
  <div class="tab-3-content" style="display: none;">
    <h2>Content for Tab 3</h2>
    <p>This is the content of Tab 3</p>
  </div>
</div>

এখানে:

• is-boxed: ট্যাবের চারপাশে বক্সড এফেক্ট যোগ করা হয়।
• is-small: ট্যাবগুলোর আকার ছোট করা হয়।
• is-centered: ট্যাবগুলো সেন্টারে অ্যালাইন করা হয়।

৪. Responsive Tabs

Bulma তে Responsive Tabs তৈরি করা খুব সহজ। আপনি is-mobile, is-tablet, is-desktop ক্লাসের মাধ্যমে ট্যাবের জন্য বিভিন্ন আকার নির্ধারণ করতে পারেন, যাতে মোবাইল, ট্যাবলেট এবং ডেস্কটপে ট্যাবগুলো সঠিকভাবে প্রদর্শিত হয়।

উদাহরণ: Responsive Tabs

<div class="tabs is-centered is-mobile is-boxed">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-1-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content of Tab 1</p>
  </div>
  <div class="tab-2-content" style="display: none;">
    <h2>Content for Tab 2</h2>
    <p>This is the content of Tab 2</p>
  </div>
  <div class="tab-3-content" style="display: none;">
    <h2>Content for Tab 3</h2>
    <p>This is the content of Tab 3</p>
  </div>
</div>

এখানে:

• is-mobile: মোবাইল ডিভাইসের জন্য ট্যাবগুলোকে আরও উপযুক্ত করে তৈরি করা হয়েছে।
• is-boxed: ট্যাবের চারপাশে বক্সড স্টাইল যোগ করা হয়েছে।

সারাংশ

Bulma তে Tabs Component খুবই কার্যকরী এবং সহজে কাস্টমাইজযোগ্য। আপনি static ট্যাব কন্টেন্টের সাথে dynamic ট্যাব কন্টেন্ট তৈরি করতে পারেন, যেখানে JavaScript ব্যবহার করে ট্যাব পরিবর্তন করার সময় কন্টেন্ট স্যুইচিং হয়। Bulma এর ট্যাব কম্পোনেন্টে বিভিন্ন স্টাইল এবং রেসপনসিভ বৈশিষ্ট্য রয়েছে,

যা আপনাকে ট্যাবগুলির আকার, রঙ এবং স্থানাঙ্ক নিয়ন্ত্রণ করতে সহায়তা করে।

Breadcrumbs কম্পোনেন্ট ওয়েবসাইটের নেভিগেশন সিস্টেমে ব্যবহৃত হয়, যাতে ব্যবহারকারী তার বর্তমান অবস্থান এবং ওয়েবসাইটের অন্যান্য পৃষ্ঠায় সহজে নেভিগেট করতে পারে। এটি সাধারণত পেজের উপরের অংশে ব্যবহৃত হয় এবং ইউজারকে ওয়েবসাইটের সাইট স্ট্রাকচার বা পেজ হায়ারার্কি বুঝতে সাহায্য করে।

Bulma ফ্রেমওয়ার্কে Breadcrumbs কম্পোনেন্টটি খুব সহজেই তৈরি করা যায় এবং এটি একটি স্টাইলিশ এবং রেসপনসিভ নেভিগেশন উপাদান হিসেবে কাজ করে।

১. Bulma এর Breadcrumbs কম্পোনেন্ট তৈরি করা

Bulma তে Breadcrumbs কম্পোনেন্টটি একটি লিস্ট হিসেবে তৈরি করা হয়, যেখানে প্রতিটি লিস্ট আইটেম একটি নেভিগেশন লিঙ্ক রূপে প্রদর্শিত হয়।

Basic Breadcrumbs তৈরি করা

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li><a href="#">Data</a></li>
    <li class="is-active"><a href="#" aria-current="page">File</a></li>
  </ul>
</nav>

এখানে:

• breadcrumb: এটি বুলমার ক্লাস, যা একটি বেসিক ব্ৰেডক্রাম্ব স্টাইল অ্যাপ্লাই করে।
• ul: লিস্টের উপাদান যা ব্ৰেডক্রাম্বের আইটেম ধারণ করে।
• li: প্রতিটি ব্ৰেডক্রাম্ব আইটেমকে রিপ্রেজেন্ট করে।
• is-active: এই ক্লাসটি বর্তমানে সিলেক্ট করা আইটেমের জন্য ব্যবহৃত হয়, যা ইউজারের বর্তমান অবস্থান নির্দেশ করে।

এখানে, "Home", "Library", এবং "Data" লিঙ্কের মাধ্যমে ইউজার পূর্ববর্তী পেজগুলিতে নেভিগেট করতে পারে, এবং "File" হল বর্তমান পেজ, যার জন্য is-active ক্লাস ব্যবহার করা হয়েছে।

২. Bulma এর Breadcrumbs কাস্টমাইজেশন

Bulma তে Breadcrumbs কম্পোনেন্টটি কাস্টমাইজ করতে আপনি CSS ক্লাস ব্যবহার করে বিভিন্ন স্টাইল পরিবর্তন করতে পারেন, যেমন:

• স্টাইল পরিবর্তন
• অর্ডার বা সিকোয়েন্স পরিবর্তন
• অন্যান্য ডিজাইন টুইক

Breadcrumbs এর ডিজাইন কাস্টমাইজেশন

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li class="is-active"><a href="#" aria-current="page">Web Design</a></li>
  </ul>
</nav>

এখানে:

• has-succeeds-separator: এই ক্লাসটি ব্ৰেডক্রাম্বে প্রতিটি আইটেমের মধ্যে একটি সেপারেটর (separator) যোগ করে, যেটি আগের আইটেমের সাথে পরবর্তী আইটেমকে আলাদা করে।

এছাড়াও আপনি has-arrow-separator ব্যবহার করে আর্মি সেপারেটর হিসেবে তীর চিহ্ন যোগ করতে পারেন:

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a></li>
    <li class="is-active"><a href="#" aria-current="page">CSS</a></li>
  </ul>
</nav>

Breadcrumbs এর স্টাইল পরিবর্তন করা

আপনি চাইলে breadcrumb কম্পোনেন্টটির রঙ, প্যাডিং, মার্জিন ইত্যাদি CSS দিয়ে কাস্টমাইজ করতে পারেন। যেমন:

<style>
  .breadcrumb {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>

এখানে, background-color, border-radius, এবং box-shadow স্টাইল প্রোপার্টি ব্যবহার করে ব্ৰেডক্রাম্বকে আরও স্টাইলিশ করা হয়েছে।

৩. Breadcrumbs এবং অন্যান্য উপাদানগুলোর সাথে ইন্টিগ্রেশন

Breadcrumbs কম্পোনেন্টটি সহজে অন্যান্য নেভিগেশন এবং UI উপাদানগুলোর সাথে ইন্টিগ্রেট করা যায়। উদাহরণস্বরূপ, আপনি এটি একটি নেভিগেশন বারের অংশ হিসেবে যুক্ত করতে পারেন বা পেজের হেডারে যুক্ত করতে পারেন।

Breadcrumbs একটি Header এর মধ্যে

<header class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Web Design Tutorials</h1>
      <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Tutorials</a></li>
          <li class="is-active"><a href="#" aria-current="page">CSS</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

এখানে, Breadcrumbs কম্পোনেন্টটি একটি hero সেকশনের মধ্যে রাখা হয়েছে, যা সাইটের হেডারের অংশ হিসেবে ব্যবহৃত হয়। এর ফলে, ব্ৰেডক্রাম্বের সাথে টাইটেল এবং অন্যান্য কন্টেন্টও একত্রে প্রদর্শিত হবে।

৪. Breadcrumbs এর অ্যাক্সেসিবিলিটি

Breadcrumbs কম্পোনেন্টের অ্যাক্সেসিবিলিটি বাড়াতে, আপনি aria-label এবং aria-current অ্যাট্রিবিউট ব্যবহার করতে পারেন। এগুলো স্ক্রীন রিডার এবং অন্যান্য অ্যাসিস্টিভ টেকনোলজির জন্য সহায়ক।

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="is-active"><a href="#" aria-current="page">Books</a></li>
  </ul>
</nav>

এখানে:

• aria-label: এটি ব্ৰেডক্রাম্বের উদ্দেশ্য এবং কনটেক্সট স্ক্রীন রিডারকে জানায়।
• aria-current="page": এটি নির্দেশ করে যে এই লিঙ্কটি বর্তমান পেজ বা সেকশনের অংশ।

সারাংশ

Bulma তে Breadcrumbs কম্পোনেন্টটি খুব সহজে তৈরি এবং কাস্টমাইজ করা যায়, এবং এটি ওয়েবসাইটের নেভিগেশন ব্যবস্থাকে আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে। Breadcrumbs ব্যবহারকারীদের বর্তমান অবস্থান প্রদর্শন করে এবং তাদের পূর্ববর্তী পৃষ্ঠাগুলোর সাথে সম্পর্ক তৈরি করতে সহায়তা করে। Bulma তে আপনি এটি বিভিন্ন স্টাইল এবং ক্লাস ব্যবহার করে কাস্টমাইজ করতে পারেন, এবং এটি অন্যান্য নেভিগেশন উপাদানগুলোর সাথে খুব সহজে ইন্টিগ্রেট করা যায়।

Bulma CSS ফ্রেমওয়ার্কের দুটি গুরুত্বপূর্ণ কম্পোনেন্ট হলো Panel এবং Menu। এই কম্পোনেন্টগুলি UI ডিজাইনকে আরো ইন্টারেক্টিভ এবং সংগঠিত করার জন্য ব্যবহৃত হয়। এগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে একটি পরিষ্কার, সুসংগঠিত এবং ব্যবহারকারী বান্ধব (user-friendly) আঙ্গিকে উপস্থাপন করতে পারবেন।

এই গাইডে, আমরা Panel এবং Menu কম্পোনেন্টের অ্যাডভান্সড ব্যবহার দেখব, যা আপনাকে আরো কাস্টমাইজড এবং দৃষ্টিনন্দন ডিজাইন তৈরি করতে সহায়তা করবে।

১. Panel Component

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

সাধারণ Panel Structure

<div class="panel">
  <p class="panel-heading">
    Panel Title
  </p>
  <div class="panel-block">
    <p>Panel Block 1</p>
  </div>
  <div class="panel-block">
    <p>Panel Block 2</p>
  </div>
  <div class="panel-block">
    <p>Panel Block 3</p>
  </div>
  <p class="panel-tabs">
    <a href="#">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">Tab 3</a>
  </p>
</div>

এখানে:

• panel: এটি প্যানেলের মূল কনটেইনার।
• panel-heading: প্যানেলের শিরোনাম (header)।
• panel-block: প্যানেলের মূল ব্লক, যেখানে আপনি আপনার কন্টেন্ট বা অপশনগুলো রাখবেন।
• panel-tabs: প্যানেলের নিচে ট্যাব প্রদর্শন করার জন্য ব্যবহৃত হয়।

২. Panel এর অ্যাডভান্সড কাস্টমাইজেশন

Bulma এর Panel কম্পোনেন্টটি আরও কাস্টমাইজড এবং ইন্টারেক্টিভ করার জন্য কিছু অতিরিক্ত ক্লাস এবং বৈশিষ্ট্য ব্যবহার করা যায়।

Panel with Icons

আপনি icons যোগ করে প্যানেলকে আরো ইন্টারেক্টিভ এবং দৃষ্টিনন্দন করতে পারেন।

<div class="panel">
  <p class="panel-heading">
    <span class="icon is-small">
      <i class="fas fa-cogs"></i>
    </span>
    Settings
  </p>
  <div class="panel-block">
    <a href="#">Option 1</a>
  </div>
  <div class="panel-block">
    <a href="#">Option 2</a>
  </div>
</div>

এখানে:

• icon is-small: আইকনকে ছোট আকারে প্রদর্শন করবে।
• fas fa-cogs: Font Awesome আইকন ব্যবহার করেছে প্যানেলের শিরোনামে।

Panel with Collapse/Toggle

আপনি JavaScript ব্যবহার করে প্যানেলকে collapse বা toggle করতে পারেন।

<div class="panel">
  <p class="panel-heading">
    Collapsible Panel
  </p>
  <div class="panel-block is-collapsible">
    <a href="#" class="toggle-panel">Toggle Panel</a>
    <div class="panel-content" style="display: none;">
      <p>More content inside the panel...</p>
    </div>
  </div>
</div>

<script>
  document.querySelector('.toggle-panel').addEventListener('click', function(event) {
    const panelContent = this.nextElementSibling;
    panelContent.style.display = (panelContent.style.display === 'none' ? 'block' : 'none');
  });
</script>

এখানে:

• panel-block is-collapsible: এটি প্যানেল ব্লকটি টগলেবল (বিস্তারিত দেখানোর/লুকানোর জন্য) করবে।
• JavaScript ব্যবহার করা হয়েছে প্যানেলটির কন্টেন্টকে toggle করতে।

৩. Menu Component

Menu কম্পোনেন্টটি সাধারণত সাইডবার মেনু, নেভিগেশন মেনু বা অ্যাকশন মেনু হিসেবে ব্যবহৃত হয়। Bulma এর Menu কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজে ইন্টারেক্টিভ এবং রেসপনসিভ মেনু তৈরি করতে পারবেন।

সাধারণ Menu Structure

<aside class="menu">
  <p class="menu-label">
    Main Navigation
  </p>
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
  <p class="menu-label">
    Settings
  </p>
  <ul class="menu-list">
    <li><a href="#">Account</a></li>
    <li><a href="#">Privacy</a></li>
  </ul>
</aside>

এখানে:

• menu: এটি মেনুর মূল কনটেইনার।
• menu-label: মেনুর বিভাগ বা সেকশনের শিরোনাম।
• menu-list: মেনুর আইটেমের তালিকা।

৪. Menu এর অ্যাডভান্সড কাস্টমাইজেশন

Bulma এর Menu কম্পোনেন্টটি আরও কাস্টমাইজ এবং ইন্টারেক্টিভ করার জন্য আপনি কিছু অতিরিক্ত ফিচার ব্যবহার করতে পারেন।

Menu with Icons

মেনু আইটেমে icons যোগ করে আপনি মেনুটিকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন।

<aside class="menu">
  <p class="menu-label">
    <span class="icon is-small">
      <i class="fas fa-home"></i>
    </span>
    Home
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Analytics</a></li>
  </ul>
</aside>

এখানে:

• icon is-small: আইকনটি ছোট আকারে প্রদর্শিত হবে।
• fas fa-home: Font Awesome আইকন যোগ করা হয়েছে।

Nested Menu

আপনি মেনুর মধ্যে nested menu ব্যবহার করে সাবমেনু তৈরি করতে পারেন।

<aside class="menu">
  <p class="menu-label">
    Main Menu
  </p>
  <ul class="menu-list">
    <li><a href="#">Option 1</a></li>
    <li>
      <a href="#">Option 2</a>
      <ul>
        <li><a href="#">Sub Option 1</a></li>
        <li><a href="#">Sub Option 2</a></li>
      </ul>
    </li>
    <li><a href="#">Option 3</a></li>
  </ul>
</aside>

এখানে:

• nested menu তৈরি করা হয়েছে, যেখানে Sub Option গুলো একটি আলাদা ul তালিকার মধ্যে রাখা হয়েছে।

Menu with Toggle

JavaScript ব্যবহার করে আপনি menu টিকে toggle (আন/অন) করতে পারেন।

<aside class="menu">
  <p class="menu-label">
    Navigation
  </p>
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
  <button class="button toggle-menu">Toggle Menu</button>
</aside>

<script>
  document.querySelector('.toggle-menu').addEventListener('click', function() {
    document.querySelector('.menu').classList.toggle('is-hidden');
  });
</script>

এখানে:

• toggle-menu বাটন ক্লিক করলে মেনুর দৃশ্যমানতা পরিবর্তন হবে, অর্থাৎ মেনুটি toggle হবে।

৫. Panel এবং Menu এর জন্য Responsive Design

Bulma CSS ফ্রেমওয়ার্কে Panel এবং Menu কম্পোনেন্টগুলি স্বাভাবিকভাবেই responsive। আপনি এগুলোর রেসপনসিভ ডিজাইন কাস্টমাইজ করতে media queries এবং Bulma এর is-hidden-mobile, is-hidden-tablet, is-hidden-desktop ইত্যাদি ক্লাস ব্যবহার করতে পারেন।

উদাহরণ (Responsive Panel):

<div class="panel is-hidden-mobile">
  <p class="panel-heading">
    Panel Visible on Desktop Only
  </p>
  <div class="panel-block">
    <p>Content visible only on large screens.</p>
  </div>
</div>

এখানে:

• is-hidden-mobile: এটি মোবাইল স্ক্রীনে প্যানেলটি লুকিয়ে রাখবে, কিন্তু বড় স্ক্রীনে এটি প্রদর্শিত হবে।

সারাংশ

Bulma এর Panel এবং **Menu

** কম্পোনেন্টগুলো ব্যবহার করে আপনি অত্যন্ত কার্যকর এবং স্টাইলিশ UI ডিজাইন তৈরি করতে পারেন। এগুলোর কাস্টমাইজেশন এবং অ্যাডভান্সড ব্যবহার যেমন icons, nested items, toggle functionality, এবং responsive design আপনাকে আরো ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব (user-friendly) ওয়েব পেজ ডিজাইন করতে সাহায্য করবে। Bulma এর helper classes এবং ফ্লেক্সবক্স সিস্টেম ব্যবহার করে আপনি এই কম্পোনেন্টগুলিকে আরও সুন্দরভাবে কাস্টমাইজ করতে পারবেন।