Links এবং Buttons যুক্ত Collection

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা বিভিন্ন ধরনের UI উপাদান এবং কম্পোনেন্ট প্রদান করে। এর মধ্যে Collection একটি খুবই কার্যকরী উপাদান, যা আপনাকে একসাথে links (লিঙ্ক) এবং buttons (বাটন) সাজানোর সুযোগ দেয়। এটি সাধারণত তালিকা (list) আকারে ব্যবহৃত হয় এবং UI ডিজাইনের জন্য খুবই সুবিধাজনক।

এখানে Links এবং Buttons যুক্ত Collection তৈরি করার পদ্ধতি এবং তাদের কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

Collection উপাদান কি?

Collection হলো Materialize CSS এর একটি উপাদান যা list-based সজ্জায় লিঙ্ক এবং বাটনগুলি উপস্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত টাস্ক বা অ্যাকশন লিঙ্কগুলির তালিকা তৈরি করার জন্য উপযুক্ত, যেমন navigation, menu items, বা অন্যান্য ক্লিকেবল আইটেম।

Materialize CSS এ Collection তৈরি করা

১. Basic Collection with Links

Materialize CSS এ collection তৈরি করার জন্য collection ক্লাস ব্যবহার করা হয়। এতে links যুক্ত করে একটি সুন্দর এবং আধুনিক স্টাইলের তালিকা তৈরি করা যায়।

<ul class="collection">
  <li class="collection-item"><a href="#!">First Link</a></li>
  <li class="collection-item"><a href="#!">Second Link</a></li>
  <li class="collection-item"><a href="#!">Third Link</a></li>
</ul>

এখানে:

• collection ক্লাসটি পুরো তালিকাটি স্টাইল করতে ব্যবহৃত হয়।
• collection-item ক্লাসটি প্রতিটি আইটেমের জন্য ব্যবহৃত হয়, যা লিঙ্কগুলির জন্য স্টাইল প্রয়োগ করে।
• <a> ট্যাগের মাধ্যমে লিঙ্কগুলি যুক্ত করা হয়েছে।

২. Collection with Buttons

আপনি buttons যুক্ত করতে চাইলে, Materialize CSS এ button ক্লাসের মাধ্যমে এটি সহজেই করা সম্ভব। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে বাটনগুলিকে collection এর সাথে যুক্ত করা হয়েছে।

<ul class="collection">
  <li class="collection-item"><a href="#!">First Link</a></li>
  <li class="collection-item"><a href="#!">Second Link</a></li>
  <li class="collection-item">
    <button class="btn waves-effect waves-light">Click Me</button>
  </li>
  <li class="collection-item"><a href="#!">Fourth Link</a></li>
</ul>

এখানে:

• একটি বাটন btn এবং waves-effect waves-light ক্লাস ব্যবহার করা হয়েছে। waves-effect ক্লাস একটি এনিমেটেড ওয়েভ এফেক্ট যোগ করে এবং waves-light ক্লাস হালকা এফেক্ট প্রদান করে।
• বাটনটি collection-item এর মধ্যে রাখা হয়েছে।

৩. Collection with Icons and Buttons

Materialize CSS এ আপনি icons এবং buttons একত্রে ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে লিঙ্ক এবং বাটনের সাথে আইকনও ব্যবহার করা হয়েছে।

<ul class="collection">
  <li class="collection-item">
    <a href="#!"><i class="material-icons">home</i> Home</a>
  </li>
  <li class="collection-item">
    <a href="#!"><i class="material-icons">info</i> About</a>
  </li>
  <li class="collection-item">
    <button class="btn waves-effect waves-light">
      <i class="material-icons left">send</i> Send Message
    </button>
  </li>
</ul>

এখানে:

• material-icons ক্লাস দিয়ে আইকন যুক্ত করা হয়েছে।
• left ক্লাস ব্যবহার করে আইকনকে বাটনের বামে রাখার জন্য কাস্টমাইজ করা হয়েছে।

৪. Collection with Active Links

Materialize CSS এ আপনি active লিঙ্ক এবং বাটনও তৈরি করতে পারেন। এটি ব্যবহারকারীর জন্য গুরুত্বপূর্ণ আইটেমগুলো হাইলাইট করতে সহায়ক।

<ul class="collection">
  <li class="collection-item active"><a href="#!">Active Link</a></li>
  <li class="collection-item"><a href="#!">Inactive Link</a></li>
  <li class="collection-item"><button class="btn waves-effect waves-light">Action Button</button></li>
</ul>

এখানে:

• active ক্লাস ব্যবহার করা হয়েছে যা প্রথম লিঙ্কটিকে সক্রিয় (highlighted) করে দেয়।

Collection এর কাস্টমাইজেশন

১. Color and Style

Materialize CSS এ আপনি collection এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন বাটনের রঙ, লিঙ্কের স্টাইল ইত্যাদি।

<ul class="collection">
  <li class="collection-item blue lighten-2"><a href="#!">Link 1</a></li>
  <li class="collection-item red lighten-2"><a href="#!">Link 2</a></li>
  <li class="collection-item green lighten-2"><a href="#!">Link 3</a></li>
</ul>

এখানে:

• blue lighten-2, red lighten-2, এবং green lighten-2 ক্লাসগুলো ব্যবহার করা হয়েছে যাতে প্রতিটি লিঙ্কের জন্য আলাদা রঙ দেয়া হয়।

২. Collapsible Collection

এছাড়া, আপনি যদি collapsible (খুলে থাকা বা বন্ধ করা) ফিচার চান, তবে Materialize CSS এ এটি সহজেই করা সম্ভব। নিচে একটি উদাহরণ দেওয়া হলো:

<ul class="collapsible">
  <li>
    <div class="collapsible-header">Link 1</div>
    <div class="collapsible-body"><span>Content for Link 1</span></div>
  </li>
  <li>
    <div class="collapsible-header">Link 2</div>
    <div class="collapsible-body"><span>Content for Link 2</span></div>
  </li>
</ul>

JavaScript:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems);
  });
</script>

উপসংহার

Materialize CSS এর Collection উপাদান একটি অত্যন্ত কার্যকরী টুল যা লিঙ্ক এবং বাটনগুলিকে তালিকা আকারে সাজাতে সহায়ক। এটি links, buttons, icons, এবং active ক্লাস সহ বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে, যার মাধ্যমে আপনি ওয়েবসাইট বা অ্যাপ্লিকেশনের ডিজাইনকে আরও সুন্দর এবং ইন্টারঅ্যাকটিভ করতে পারেন। Materialize CSS এর মাধ্যমে আপনি সহজেই এবং দ্রুত আকর্ষণীয় collection তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।