Materialize এর ট্যাবস এবং একর্ডিয়ন (Collapsible)

মেটেরিয়ালাইজ (Materialize) - Web Development

345

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির উপর ভিত্তি করে তৈরি। এর মধ্যে Tabs এবং Accordion (Collapsible) দুটি গুরুত্বপূর্ণ UI কম্পোনেন্ট রয়েছে, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীদের ইন্টারঅ্যাকশন সহজ এবং আকর্ষণীয় করতে সহায়তা করে। এখানে Tabs এবং Accordion (Collapsible) তৈরি এবং কনফিগার করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হলো।

Materialize Tabs

Tabs একটি খুবই সাধারণ UI উপাদান, যা ওয়েব পেজের মধ্যে একাধিক কনটেন্ট বা সেকশনের মধ্যে দ্রুত স্যুইচ করার সুযোগ প্রদান করে। Materialize CSS-এ tabs ব্যবহার করে আপনি সহজেই এই কার্যকারিতা বাস্তবায়ন করতে পারবেন।

১. Tabs তৈরি করা:

Materialize CSS এ ট্যাব তৈরি করার জন্য কিছু সহজ HTML এবং JavaScript ব্যবহার করতে হয়।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Tabs</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <!-- Tabs Structure -->
  <ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#test1">Tab 1</a></li>
    <li class="tab col s3"><a href="#test2">Tab 2</a></li>
    <li class="tab col s3"><a href="#test3">Tab 3</a></li>
  </ul>

  <div id="test1" class="col s12">
    <h5>Content of Tab 1</h5>
    <p>This is the content for the first tab.</p>
  </div>
  <div id="test2" class="col s12">
    <h5>Content of Tab 2</h5>
    <p>This is the content for the second tab.</p>
  </div>
  <div id="test3" class="col s12">
    <h5>Content of Tab 3</h5>
    <p>This is the content for the third tab.</p>
  </div>

  <script>
    // Initialize Materialize tabs
    $(document).ready(function(){
      $('.tabs').tabs();
    });
  </script>

</body>
</html>

এখানে:

tabs ক্লাস ট্যাবের জন্য ব্যবহৃত হয়।
প্রতিটি ট্যাবের জন্য li এবং a ট্যাগ ব্যবহার করা হয়, যেগুলি ট্যাবের লিঙ্ক হিসেবে কাজ করে।
id="test1", id="test2", id="test3" এই আইডিগুলোর মাধ্যমে আপনি প্রতিটি ট্যাবের কনটেন্ট ডিভি তৈরি করেন।
JavaScript ব্যবহার করে $('.tabs').tabs(); এর মাধ্যমে ট্যাবের কার্যকারিতা সক্রিয় করা হয়।

২. Tabs কাস্টমাইজেশন:

আপনি ট্যাবগুলির রঙ, আকার, এবং স্টাইল কাস্টমাইজ করতে পারেন।
ট্যাবের active স্টাইল অটো পরিবর্তন হবে, তবে আপনি চাইলে CSS দিয়ে এটি কাস্টমাইজ করতে পারেন।

/* Active Tab Color */
.tabs .tab a.active {
  background-color: #f44336;
  color: white;
}

Materialize Accordion (Collapsible)

Accordion বা Collapsible একটি UI উপাদান, যা একাধিক প্যানেল বা সেকশন দিয়ে সাজানো থাকে, এবং ব্যবহারকারী একটি সেকশন খুললে অন্য সেকশনটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। এটি একধরনের expandable list হিসেবে কাজ করে এবং সাধারণত প্রোপার্টি বা ডিটেইলস দেখানোর জন্য ব্যবহৃত হয়।

১. Accordion (Collapsible) তৈরি করা:

Materialize CSS-এ Accordion তৈরি করতে collapsible ক্লাস ব্যবহার করতে হয়। এখানে একটি উদাহরণ দেওয়া হলো:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Accordion</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <!-- Accordion Structure -->
  <ul class="collapsible">
    <li>
      <div class="collapsible-header">Section 1</div>
      <div class="collapsible-body"><span>This is the content of section 1.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Section 2</div>
      <div class="collapsible-body"><span>This is the content of section 2.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Section 3</div>
      <div class="collapsible-body"><span>This is the content of section 3.</span></div>
    </li>
  </ul>

  <script>
    // Initialize Materialize collapsible
    $(document).ready(function(){
      $('.collapsible').collapsible();
    });
  </script>

</body>
</html>

এখানে:

collapsible-header: এটি প্রতিটি সেকশনের শিরোনাম।
collapsible-body: এটি প্রতিটি সেকশনের কনটেন্ট বা বিস্তারিত।
collapsible: এই ক্লাসটি সম্পূর্ণ একর্ডিয়ন প্যানেলকে চিহ্নিত করে।

২. Accordion কাস্টমাইজেশন:

আপনি একাধিক accordion ব্যবহার করতে পারেন এবং তাদের মধ্যে প্রাথমিকভাবে একটিকে খোলা রাখার জন্য active ক্লাস ব্যবহার করতে পারেন।
CSS এর মাধ্যমে স্টাইল কাস্টমাইজ করা সম্ভব।

/* Accordion Header Style */
.collapsible-header {
  background-color: #4CAF50;
  color: white;
}

/* Accordion Body Style */
.collapsible-body {
  background-color: #f9f9f9;
}

৩. এনিমেশন এবং এক্সট্রা কনফিগারেশন:

আপনি accordion এর সেকশনগুলোকে কাস্টমাইজ করে একাধিক প্যানেল খুলতে বা একটি প্যানেলই খুলতে সেট করতে পারেন।
Materialize CSS এর collapsible কম্পোনেন্টে accordion এবং expandable list সহ বিভিন্ন কনফিগারেশন ব্যবহার করা যায়।

// Enable multiple open sections
$('.collapsible').collapsible({
  accordion: false // Allow multiple open sections
});

উপসংহার

Tabs এবং Accordion (Collapsible) দুটি গুরুত্বপূর্ণ UI উপাদান যা ওয়েবসাইট বা অ্যাপ্লিকেশন ডিজাইনে ব্যবহৃত হয়। Materialize CSS এর মাধ্যমে এই দুটি কম্পোনেন্ট সহজেই তৈরি এবং কাস্টমাইজ করা যায়। Tabs ব্যবহারকারীদের জন্য বিভিন্ন কনটেন্টের মধ্যে দ্রুত স্যুইচ করার সুবিধা দেয়, আর Accordion (Collapsible) ব্যবহারকারীদের একাধিক সেকশন বা প্যানেলের মধ্যে দ্রুত এক্সপ্যান্ড এবং কোলাপস করার সুযোগ দেয়। এই কম্পোনেন্টগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইটে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ডিজাইন তৈরি করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

310

\Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Tabs এবং Tab Navigation তৈরি করতে সহায়ক। Tabs ব্যবহার করে আপনি আপনার ওয়েবসাইটে একাধিক কনটেন্ট সেকশনকে সুন্দরভাবে গ্রুপ এবং প্রদর্শন করতে পারেন। এটি একটি জনপ্রিয় ইন্টারফেস উপাদান, যা বিশেষ করে বিভিন্ন কনটেন্টকে একত্রিত করার জন্য এবং ওয়েবপেজের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।

এখানে Tabs এবং Tab Navigation তৈরি করার প্রক্রিয়া, এর কনফিগারেশন এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।

Materialize CSS এ Tabs তৈরি করা

Materialize CSS-এ Tabs তৈরি করার জন্য একটি নির্দিষ্ট HTML কাঠামো এবং JavaScript এর প্রয়োজন হয়। আপনি সহজেই কনটেন্ট ট্যাব তৈরি করতে পারেন এবং প্রতিটি ট্যাবের মধ্যে ভিন্ন ভিন্ন কনটেন্ট সন্নিবেশ করতে পারেন।

Basic Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Tabs Example</title>
  <!-- Materialize CSS Link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Tabs Structure -->
  <div class="container">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Tab 1</a></li>
      <li class="tab col s3"><a href="#test2">Tab 2</a></li>
      <li class="tab col s3"><a href="#test3">Tab 3</a></li>
    </ul>
    <div id="test1" class="col s12">
      <h5>Tab 1 Content</h5>
      <p>This is the content of Tab 1.</p>
    </div>
    <div id="test2" class="col s12">
      <h5>Tab 2 Content</h5>
      <p>This is the content of Tab 2.</p>
    </div>
    <div id="test3" class="col s12">
      <h5>Tab 3 Content</h5>
      <p>This is the content of Tab 3.</p>
    </div>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- Initialize Tabs -->
  <script>
    $(document).ready(function(){
      $('.tabs').tabs();
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

ul.tabs: এটি Tabs এর মেনু তৈরি করে। এখানে, প্রতিটি li ট্যাবের একটি লিঙ্ক (anchor tag) ধারণ করে।
id="test1": প্রতিটি ট্যাবের জন্য একটি কনটেন্ট সেকশন তৈরি করা হয়েছে, যা id দ্বারা নির্ধারিত হয়।
$('.tabs').tabs();: এটি Materialize CSS এর মাধ্যমে ট্যাব ফিচার ইনিশিয়ালাইজ করার জন্য ব্যবহৃত হয়।

Materialize CSS এর Tab Navigation

Tab Navigation একটি শক্তিশালী উপাদান যা সাইটের বিভিন্ন সেকশন দ্রুত নেভিগেট করতে সহায়ক। Materialize CSS এ Tab Navigation তৈরি করতে হলে আপনাকে একইভাবে Tabs তৈরি করতে হবে, তবে এর মধ্যে nav এবং tabs ক্লাসের ব্যবহারের মাধ্যমে নেভিগেশন সিস্টেম তৈরি করতে হয়।

Tab Navigation Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Tab Navigation</title>
  <!-- Materialize CSS Link -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Tab Navigation Structure -->
  <div class="container">
    <ul id="tabs-swipe-demo" class="tabs">
      <li class="tab col s3"><a href="#home">Home</a></li>
      <li class="tab col s3"><a href="#about">About</a></li>
      <li class="tab col s3"><a href="#services">Services</a></li>
      <li class="tab col s3"><a href="#contact">Contact</a></li>
    </ul>
    <div id="home" class="col s12">
      <h5>Home Tab</h5>
      <p>Welcome to the Home tab.</p>
    </div>
    <div id="about" class="col s12">
      <h5>About Tab</h5>
      <p>Information about the company.</p>
    </div>
    <div id="services" class="col s12">
      <h5>Services Tab</h5>
      <p>Details of the services we offer.</p>
    </div>
    <div id="contact" class="col s12">
      <h5>Contact Tab</h5>
      <p>Get in touch with us.</p>
    </div>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- Initialize Tabs with swipeable feature -->
  <script>
    $(document).ready(function(){
      $('#tabs-swipe-demo').tabs({
        swipeable: true
      });
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

id="tabs-swipe-demo": এটি Tab Navigation এর জন্য নির্দিষ্ট করা আইডি। id অ্যাট্রিবিউটের মাধ্যমে Tabs এর মধ্যে a ট্যাগের মাধ্যমে প্রতিটি ট্যাবের নাম এবং কনটেন্ট সেকশন নির্ধারণ করা হয়েছে।
swipeable: যদি আপনি একটি মোবাইল-ফ্রেন্ডলি ট্যাব চান, তাহলে swipeable অপশন সক্রিয় করতে পারেন। এটি মোবাইল ডিভাইসে ট্যাবের মাধ্যমে স্ক্রল করার সুবিধা দেয়।

Tab Navigation কাস্টমাইজ করা

Materialize CSS এ Tab Navigation কাস্টমাইজ করতে আপনি কিছু স্টাইল প্রয়োগ করতে পারেন, যেমন ট্যাবগুলোর রঙ, আকৃতি বা তাদের সিলেকশন। উদাহরণস্বরূপ:

১. Tab Color Customization

<style>
  .tabs .tab a {
    color: #26a69a;  /* Default Tab Color */
  }
  .tabs .tab a:hover {
    color: #004d40;  /* Hover Color */
  }
  .tabs .tab a.active {
    color: #004d40;  /* Active Tab Color */
  }
</style>

এখানে:

color: এটি ট্যাবের সাধারণ এবং হোভার স্টাইলের রঙ পরিবর্তন করতে ব্যবহৃত হয়েছে।
active: এটি বর্তমানে নির্বাচিত (active) ট্যাবের রঙ কাস্টমাইজ করতে ব্যবহৃত হয়।

২. Adjust Tab Height

<style>
  .tabs {
    height: 50px;
  }
  .tabs .tab {
    padding: 15px;
  }
</style>

এখানে:

height: Tabs এর উচ্চতা কাস্টমাইজ করা হয়েছে।
padding: প্রতিটি ট্যাবের মধ্যে প্যাডিং যোগ করা হয়েছে।

উপসংহার

Materialize CSS এর Tabs এবং Tab Navigation ওয়েব ডিজাইনে একটি অত্যন্ত কার্যকরী উপাদান। এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করতে সহায়তা করে। আপনি সহজেই কাস্টমাইজ করতে পারেন, যেমন ট্যাবের রঙ, অবস্থান, সাইজ এবং সিলেকশন স্টাইল পরিবর্তন করে। Materialize CSS এর এই ট্যাব সিস্টেম ওয়েবসাইটের বিভিন্ন সেকশন সুন্দরভাবে গ্রুপ এবং প্রদর্শন করতে সক্ষম, যা একাধিক কনটেন্ট প্রদর্শন করার জন্য একটি আদর্শ সমাধান।

Content added By

Rezwan Siddiki Tamim

Tabs এর জন্য Dynamic Content লোড করা

324

Materialize CSS ফ্রেমওয়ার্কে Tabs ব্যবহার করা সহজ এবং এটি ওয়েব পেজে বিভিন্ন কনটেন্ট বা সেকশনকে সুগমভাবে উপস্থাপন করতে সহায়ক। আপনি যখন Tabs ব্যবহার করেন, তখন প্রতি ট্যাবের জন্য একটি নির্দিষ্ট কনটেন্ট প্রদর্শিত হয়। তবে, কখনো কখনো, আপনি চাইবেন যে প্রতিটি ট্যাবের জন্য ডাইনামিক কনটেন্ট লোড করা হোক, যেমন API থেকে ডেটা আনা বা বিভিন্ন ইন্টারঅ্যাকটিভ কন্টেন্ট দেখানো।

এখানে Materialize CSS এর মাধ্যমে Tabs ব্যবহার করে ডাইনামিক কনটেন্ট লোড করার পদ্ধতি তুলে ধরা হলো।

Materialize Tabs তৈরি করা

প্রথমে, Materialize Tabs এর সাধারণ কাঠামো তৈরি করতে হবে। এখানে একটি সাধারণ Tabs তৈরি করা হয়েছে:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Tabs Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <!-- Tabs Structure -->
  <div class="container">
    <ul id="tabs-swipe-demo" class="tabs">
      <li class="tab col s3"><a href="#test1">Tab 1</a></li>
      <li class="tab col s3"><a href="#test2">Tab 2</a></li>
      <li class="tab col s3"><a href="#test3">Tab 3</a></li>
    </ul>
    <div id="test1" class="col s12">
      <!-- Dynamic content will be loaded here -->
    </div>
    <div id="test2" class="col s12">
      <!-- Dynamic content will be loaded here -->
    </div>
    <div id="test3" class="col s12">
      <!-- Dynamic content will be loaded here -->
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.tabs').tabs();  // Initialize Tabs
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

Tabs Structure: এখানে একটি ট্যাবের কাঠামো তৈরি করা হয়েছে যেখানে তিনটি ট্যাব রয়েছে: Tab 1, Tab 2, এবং Tab 3।
প্রতিটি ট্যাবের জন্য একটি div আছে যা col s12 ক্লাসের সাথে যুক্ত এবং এতে ডাইনামিক কনটেন্ট লোড হবে।
$('.tabs').tabs();: এটি Materialize এর tabs ফিচারকে সক্রিয় করে।

Dynamic Content লোড করা

এখন, আমরা Tabs এর জন্য ডাইনামিক কনটেন্ট লোড করতে একটি AJAX রিকোয়েস্ট ব্যবহার করব। ধরুন, আপনি প্রতিটি ট্যাবের জন্য আলাদা ডেটা লোড করতে চান। আপনি jQuery বা Vanilla JavaScript ব্যবহার করে এটি করতে পারেন।

১. AJAX Request দিয়ে Dynamic Content লোড করা:

<script>
  $(document).ready(function() {
    // Initialize Tabs
    $('.tabs').tabs();

    // Load dynamic content for Tab 1
    $('#test1').load('https://api.example.com/content1', function() {
      console.log('Tab 1 content loaded');
    });

    // Load dynamic content for Tab 2
    $('#test2').load('https://api.example.com/content2', function() {
      console.log('Tab 2 content loaded');
    });

    // Load dynamic content for Tab 3
    $('#test3').load('https://api.example.com/content3', function() {
      console.log('Tab 3 content loaded');
    });
  });
</script>

কোড ব্যাখ্যা:

$('#test1').load(url, callback): এখানে load মেথডটি ব্যবহার করা হচ্ছে, যা একটি URL থেকে কনটেন্ট লোড করবে এবং callback ফাংশনটি তখন কল হবে যখন কনটেন্ট লোড সম্পূর্ণ হবে। প্রতিটি ট্যাবের জন্য একটি API এন্ডপয়েন্ট নির্দিষ্ট করা হয়েছে (এখানে https://api.example.com/content1, content2, এবং content3 উদাহরণস্বরূপ দেওয়া হয়েছে)।
console.log(): কনটেন্ট লোড হওয়া পর একটি মেসেজ কনসোলে প্রদর্শিত হবে।

২. Content লোড হওয়ার পর Callback ফাংশন ব্যবহার করা:

আপনি যখন ডাইনামিক কনটেন্ট লোড করবেন, তখন আপনি সেই কনটেন্টকে callback function এর মাধ্যমে প্রসেস বা ইন্টারঅ্যাকটিভ করতে পারেন। উদাহরণস্বরূপ:

<script>
  $(document).ready(function() {
    $('.tabs').tabs();

    // Load content for Tab 1 dynamically
    $('#test1').load('https://api.example.com/content1', function() {
      $(this).append('<p>Additional content loaded!</p>');
    });
    
    // Similarly for other tabs...
  });
</script>

এখানে, $('#test1').append() ব্যবহার করে আপনি লোড হওয়া কনটেন্টের পরে আরো কন্টেন্ট অ্যাড করতে পারেন।

উপসংহার

Materialize CSS এর Tabs ব্যবহার করে আপনি সহজেই ডাইনামিক কনটেন্ট লোড করতে পারেন। AJAX বা API Requests ব্যবহার করে আপনি প্রতিটি ট্যাবের জন্য আলাদা কনটেন্ট ডাইনামিকভাবে লোড করতে পারবেন। এটি ওয়েব অ্যাপ্লিকেশন বা সাইটের ইউজার ইন্টারফেসকে আরো ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে, কারণ আপনি শুধুমাত্র প্রয়োজনীয় ডেটা লোড করেন এবং তা ব্যবহারকারীর সামনে তুলে ধরেন।

Content added By

Rezwan Siddiki Tamim

Accordion বা Collapsible Elements তৈরি করা

300

Accordion বা Collapsible Elements হলো এমন ধরনের UI উপাদান যা একাধিক সেকশনকে একসাথে গ্রুপ করে এবং এক সময়ে একটিই সেকশন প্রদর্শন করতে দেয়। এগুলি সাধারণত লম্বা কন্টেন্টকে ছোট সেকশনে ভাগ করে দেখানোর জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি সেকশন খুললে অন্য সেকশনগুলো বন্ধ হয়ে যায়। Materialize CSS এ Accordion বা Collapsible Elements তৈরি করা খুবই সহজ এবং ইনটারেকটিভ।

এখানে Accordion বা Collapsible Elements তৈরি করার ধাপগুলো এবং কনফিগারেশন বিস্তারিতভাবে আলোচনা করা হলো।

Accordion বা Collapsible Elements তৈরি করা

Accordion বা Collapsible Elements তৈরি করতে Materialize CSS এ Collapsible ক্লাস ব্যবহার করা হয়, যা ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক) এর মাধ্যমে সেকশন খোলার এবং বন্ধ করার সুবিধা দেয়।

১. Basic Accordion তৈরি করা:

Materialize CSS এ Accordion তৈরির জন্য collapsible ক্লাস এবং collapsible-item ব্যবহার করা হয়। উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Accordion Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Content 1</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Content 2</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Content 3</span></div>
    </li>
  </ul>

  <script>
    $(document).ready(function(){
      $('.collapsible').collapsible();
    });
  </script>

</body>
</html>

এখানে:

collapsible: এই ক্লাসটি পুরো অ্যাকর্ডিয়ন বা কোলাপসিবল লিস্ট তৈরি করে।
collapsible-header: এই ক্লাসটি প্রতিটি সেকশনের শিরোনাম (header) জন্য ব্যবহৃত হয়।
collapsible-body: এই ক্লাসটি সেকশনের কনটেন্ট (body) ধারণ করে।
material-icons: আইকন ব্যবহার করার জন্য ক্লাস।
collapsible(): জাভাস্ক্রিপ্ট ফাংশন যা অ্যাকর্ডিয়ন বা কোলাপসিবল সিস্টেমের কার্যকারিতা সক্রিয় করে।

২. Accordion কাস্টমাইজেশন (একাধিক সেকশন একসাথে খোলার জন্য):

ডিফল্টভাবে, Materialize CSS এ এক সময়ে শুধুমাত্র একটি সেকশন খোলা থাকে। তবে আপনি চাইলে একাধিক সেকশন একসাথে খোলার জন্য কনফিগারেশন পরিবর্তন করতে পারেন। এর জন্য accordion: false অপশন ব্যবহার করা হয়।

<script>
  $(document).ready(function(){
    $('.collapsible').collapsible({
      accordion: false // একাধিক সেকশন একসাথে খোলার জন্য
    });
  });
</script>

৩. Collapsible Items with Header and Body

যখন Accordion তৈরি করা হয়, তখন প্রতিটি আইটেমের জন্য একটি হেডার (header) এবং বডি (body) থাকে। নিচের উদাহরণে এটি আরও বিস্তারিতভাবে দেখানো হয়েছে:

<ul class="collapsible popout">
  <li>
    <div class="collapsible-header"><i class="material-icons">add_circle</i>First Item</div>
    <div class="collapsible-body"><span>This is the first item content</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">remove_circle</i>Second Item</div>
    <div class="collapsible-body"><span>This is the second item content</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">more_horiz</i>Third Item</div>
    <div class="collapsible-body"><span>This is the third item content</span></div>
  </li>
</ul>

এখানে:

popout: এই ক্লাসটি সেকশনগুলোকে পপ-আউট স্টাইলের মত দেখাবে, যেখানে সেকশনটি খুললে তার আশপাশের সেকশনগুলি সরিয়ে দেওয়া হবে।
material-icons: আইকন যুক্ত করার জন্য ব্যবহৃত।

Advanced Accordion এবং Collapsible Features

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

১. Initial Opened Item

আপনি যদি চান যে অ্যাকর্ডিয়ন বা কোলাপসিবল লিস্টে কোন একটি আইটেম প্রথমে খুলে থাকে, তাহলে open ক্লাস ব্যবহার করতে পারেন:

<li class="active">
  <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
  <div class="collapsible-body"><span>Content 1</span></div>
</li>

এখানে active ক্লাস ব্যবহার করা হয়েছে যাতে প্রথম আইটেমটি ডিফল্টভাবে খোলা থাকে।

২. Nested Collapsibles

আপনি একেকটি আইটেমের মধ্যে আরও nested collapsible যোগ করতে পারেন:

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body">
      <span>Content 1</span>
      <ul class="collapsible">
        <li>
          <div class="collapsible-header"><i class="material-icons">filter_list</i>Sub Item</div>
          <div class="collapsible-body"><span>Sub content here</span></div>
        </li>
      </ul>
    </div>
  </li>
</ul>

এখানে একটি nested collapsible যোগ করা হয়েছে, যা মূল কোলাপসিবলের মধ্যে আরও একটি কোলাপসিবল তৈরি করেছে।

উপসংহার

Accordion বা Collapsible Elements হলো ওয়েব ডিজাইনে অত্যন্ত কার্যকরী উপাদান, যা ব্যবহারকারীদের জন্য আরও সুশৃঙ্খল এবং পরিষ্কার কন্টেন্ট উপস্থাপন করতে সাহায্য করে। Materialize CSS এ এই কম্পোনেন্টটি খুবই সহজে তৈরি এবং কাস্টমাইজ করা যায়। আপনি এর মাধ্যমে একাধিক সেকশন প্রদর্শন করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং ফাংশনাল করে তোলে।

Content added By

Rezwan Siddiki Tamim

Multiple এবং Single Expandable Collapsible তৈরি করা

286

Collapsible কম্পোনেন্ট Materialize CSS-এ একটি অত্যন্ত জনপ্রিয় এবং কার্যকরী উপাদান, যা সাধারণত একটি লম্বা তালিকা বা মেনু ব্যবস্থাপনা করতে ব্যবহৃত হয়। এর মাধ্যমে ব্যবহারকারী একযোগভাবে একটি বা একাধিক আইটেম সম্প্রসারণ করতে পারেন, যাতে তারা প্রয়োজনীয় তথ্য দেখতে বা ইন্টারঅ্যাকশন করতে পারেন। Collapsible সাধারণত accordion-style ড্রপডাউন হিসেবে কাজ করে, যেখানে একাধিক সেকশন থাকে এবং একটি সেকশন একে একে প্রসারিত বা সংকুচিত হয়।

এখানে Single Expandable এবং Multiple Expandable Collapsible তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।

Single Expandable Collapsible

Single Expandable Collapsible হলো এমন একটি মেনু বা তালিকা যেখানে একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড (প্রসারিত) হয়। অন্য কোন সেকশন এক্সপ্যান্ড করার সাথে সাথে পূর্ববর্তী সেকশনটি সংকুচিত হয়ে যায়।

Single Expandable Collapsible উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Single Expandable Collapsible</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Collapsible Structure -->
  <ul class="collapsible">
    <li>
      <div class="collapsible-header">Item 1</div>
      <div class="collapsible-body"><span>This is item 1 content.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Item 2</div>
      <div class="collapsible-body"><span>This is item 2 content.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Item 3</div>
      <div class="collapsible-body"><span>This is item 3 content.</span></div>
    </li>
  </ul>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- Initialize Collapsible -->
  <script>
    $(document).ready(function(){
      $('.collapsible').collapsible();
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

collapsible-header: এটি একটি ক্লিকেবল হেডার যা ব্যবহারকারী ক্লিক করলে সেকশন এক্সপ্যান্ড হবে।
collapsible-body: এটি প্রতিটি এক্সপ্যান্ড হওয়া সেকশনের কন্টেন্ট।
$('.collapsible').collapsible();: এটি Materialize এর জাভাস্ক্রিপ্ট ফাংশন যা collapsible কম্পোনেন্টকে কার্যকরী করে।

এখানে single-expandable সেটিং ডিফল্টভাবে সক্রিয় থাকে, যেখানে একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড করা যায়।

Multiple Expandable Collapsible

Multiple Expandable Collapsible-এ একাধিক সেকশন একযোগে এক্সপ্যান্ড হতে পারে। এটি তখন কার্যকরী যখন আপনি চাইবেন যে একাধিক সেকশন একই সময়ে এক্সপ্যান্ড হতে পারে এবং অন্য সেকশনগুলো একই সময় সংকুচিত না হয়ে এক্সপ্যান্ড হয়ে থাকে।

Multiple Expandable Collapsible উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Expandable Collapsible</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Collapsible Structure (Multiple Expandable) -->
  <ul class="collapsible expandable">
    <li>
      <div class="collapsible-header">Item 1</div>
      <div class="collapsible-body"><span>This is item 1 content.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Item 2</div>
      <div class="collapsible-body"><span>This is item 2 content.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Item 3</div>
      <div class="collapsible-body"><span>This is item 3 content.</span></div>
    </li>
  </ul>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- Initialize Collapsible -->
  <script>
    $(document).ready(function(){
      $('.collapsible').collapsible({
        accordion: false // Set accordion to false to allow multiple collapsible sections to expand at once
      });
    });
  </script>

</body>
</html>

কোড ব্যাখ্যা:

expandable: এটি ক্লাস যোগ করা হয়েছে, যাতে একাধিক সেকশন একসাথে এক্সপ্যান্ড করা যেতে পারে।
accordion: false: এই সেটিংটি Materialize এর জাভাস্ক্রিপ্ট কনফিগারেশনে ব্যবহার করা হয়, যা একাধিক সেকশন একযোগে এক্সপ্যান্ড করার সুবিধা প্রদান করে।

এখানে multiple-expandable সেটিং সক্রিয় করা হয়েছে, যার মাধ্যমে একাধিক সেকশন একযোগে এক্সপ্যান্ড হবে এবং কোনো সেকশন সংকুচিত হবে না।

উপসংহার

Materialize CSS-এর Collapsible কম্পোনেন্ট আপনাকে খুব সহজে single-expandable বা multiple-expandable মেনু বা তালিকা তৈরি করতে সহায়তা করে। Single Expandable Collapsible সাধারণত ব্যবহৃত হয় যখন আপনি একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড করতে চান, আর Multiple Expandable Collapsible ব্যবহৃত হয় যখন একাধিক সেকশন একসাথে এক্সপ্যান্ড করা সম্ভব হয়। Materialize এর সহজ এবং শক্তিশালী এই কম্পোনেন্টটি ওয়েব ডিজাইনে অত্যন্ত কার্যকরী।

Content added By

Rezwan Siddiki Tamim

Materialize CSS এর পরিচিতি Materialize CSS সেটআপ এবং ইনস্টলেশন Materialize এর Grid System Materialize এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Materialize এর কালার থিম এবং কাস্টমাইজেশন

Materialize এর ট্যাবস এবং একর্ডিয়ন (Collapsible)

Materialize Tabs

১. Tabs তৈরি করা:

২. Tabs কাস্টমাইজেশন:

Materialize Accordion (Collapsible)

১. Accordion (Collapsible) তৈরি করা:

২. Accordion কাস্টমাইজেশন:

৩. এনিমেশন এবং এক্সট্রা কনফিগারেশন:

উপসংহার

Tabs এবং Tab Navigation তৈরি করা

Materialize CSS এ Tabs তৈরি করা

Basic Tabs Example

কোড ব্যাখ্যা:

Materialize CSS এর Tab Navigation

Tab Navigation Example

কোড ব্যাখ্যা:

Tab Navigation কাস্টমাইজ করা

১. Tab Color Customization

২. Adjust Tab Height

উপসংহার

Tabs এর জন্য Dynamic Content লোড করা

Materialize Tabs তৈরি করা

কোড ব্যাখ্যা:

Dynamic Content লোড করা

১. AJAX Request দিয়ে Dynamic Content লোড করা:

কোড ব্যাখ্যা:

২. Content লোড হওয়ার পর Callback ফাংশন ব্যবহার করা:

উপসংহার

Accordion বা Collapsible Elements তৈরি করা

Accordion বা Collapsible Elements তৈরি করা

১. Basic Accordion তৈরি করা:

২. Accordion কাস্টমাইজেশন (একাধিক সেকশন একসাথে খোলার জন্য):

৩. Collapsible Items with Header and Body

Advanced Accordion এবং Collapsible Features

১. Initial Opened Item

২. Nested Collapsibles

উপসংহার

Multiple এবং Single Expandable Collapsible তৈরি করা

Single Expandable Collapsible

Single Expandable Collapsible উদাহরণ:

কোড ব্যাখ্যা:

Multiple Expandable Collapsible

Multiple Expandable Collapsible উদাহরণ:

কোড ব্যাখ্যা:

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!