Materialize এর Collection এবং List তৈরি করা

Materialize CSS ফ্রেমওয়ার্কটি ওয়েব ডিজাইন ও ডেভেলপমেন্টে বিভিন্ন ধরনের collection এবং list তৈরিতে সহায়ক। Collection এবং list হলো এক ধরনের তালিকা যা ব্যবহারকারীদের দ্রুত এবং সহজে ইনফরমেশন অ্যাক্সেস করতে সাহায্য করে। Materialize এর মাধ্যমে আপনি একটি সুশৃঙ্খল, আকর্ষণীয় এবং responsive তালিকা তৈরি করতে পারবেন যা ওয়েব পেজের ডিজাইনকে আরো উন্নত করবে।

Collection কি?

Collection হলো একটি গ্রুপ বা তালিকা, যা সাধারণত একাধিক আইটেম ধারণ করে এবং উপস্থাপন করে। Materialize CSS এ collection ব্যবহার করে আপনি বিভিন্ন ধরনের লিস্ট তৈরি করতে পারেন যেমন সাধারণ লিস্ট, ড্রপডাউন, এবং আরও অনেক কিছু। Collection আইটেমগুলো সাধারণত link (লিঙ্ক), card, বা অন্যান্য HTML উপাদান দিয়ে তৈরি করা হয়।

Materialize এ Collection তৈরি করা

Collection তৈরি করতে Materialize CSS এ collection এবং collection-item ক্লাস ব্যবহার করা হয়। আপনি এটি একটি সোজাসাপ্টা তালিকা হিসেবে উপস্থাপন করতে পারেন।

Basic Collection Structure

<div class="collection">
  <a href="#!" class="collection-item">Item 1</a>
  <a href="#!" class="collection-item">Item 2</a>
  <a href="#!" class="collection-item">Item 3</a>
  <a href="#!" class="collection-item">Item 4</a>
</div>

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

• collection: এটি একটি কন্টেইনার হিসেবে কাজ করে যা সমস্ত collection-item আইটেম ধারণ করে।
• collection-item: এটি একটি আইটেম যা মূলত লিস্টের অংশ হিসেবে উপস্থাপন করা হয়।

Collection with Icons

আপনি collection-item এর মধ্যে আইকনও যোগ করতে পারেন, যা ব্যবহারকারীদের জন্য আরও কার্যকরী ও আকর্ষণীয় হতে পারে।

<div class="collection">
  <a href="#!" class="collection-item"><i class="material-icons left">home</i>Item 1</a>
  <a href="#!" class="collection-item"><i class="material-icons left">business</i>Item 2</a>
  <a href="#!" class="collection-item"><i class="material-icons left">settings</i>Item 3</a>
</div>

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

• material-icons left: এই ক্লাসটি Materialize এর আইকন স্টাইল ব্যবহার করে এবং আইকনটি বাম পাশে স্থাপন করে।

Collection with Badges

Collection-item এর মধ্যে আপনি badge (ছোট ট্যাগ) যোগ করতে পারেন, যা আইটেমের সাথে কিছু অতিরিক্ত তথ্য বা স্ট্যাটাস দেখাতে সাহায্য করে।

<div class="collection">
  <a href="#!" class="collection-item">Item 1 <span class="new badge" data-badge-caption="new"></span></a>
  <a href="#!" class="collection-item">Item 2 <span class="badge">4</span></a>
  <a href="#!" class="collection-item">Item 3 <span class="badge">5</span></a>
</div>

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

• badge: এটি একটি ছোট ট্যাগ বা স্ট্যাটাস যা সাধারণত আইটেমের পরিশেষে প্রদর্শিত হয়।
• new badge: এটি একটি নতুন আইটেম চিহ্নিত করার জন্য ব্যবহার করা হয়।

List কি?

List হলো একটি তালিকা যা সাধারণত একাধিক আইটেম সমন্বিত হয়। List সাধারণত একটি সোজাসাপ্টা তথ্য উপস্থাপন করার জন্য ব্যবহৃত হয়। Materialize CSS এ list তৈরি করার জন্য collection এর পাশাপাশি list-item ক্লাস ব্যবহার করা যায়।

Materialize এ List তৈরি করা

Materialize CSS এ list তৈরি করতে collection এর পাশাপাশি collection-item এর মাধ্যমে একাধিক আইটেম তৈরি করা হয়।

Simple List Example

<ul class="collection">
  <li class="collection-item">List Item 1</li>
  <li class="collection-item">List Item 2</li>
  <li class="collection-item">List Item 3</li>
  <li class="collection-item">List Item 4</li>
</ul>

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

• ul: এটি লিস্টের কন্টেইনার হিসেবে কাজ করে।
• li: এটি তালিকার প্রতিটি আইটেমের জন্য ব্যবহৃত হয়।

List with Icons and Links

এছাড়া আপনি লিস্ট আইটেমে icon এবং links যোগ করতে পারেন।

<ul class="collection">
  <li class="collection-item"><i class="material-icons left">home</i><a href="#">Home</a></li>
  <li class="collection-item"><i class="material-icons left">business</i><a href="#">Business</a></li>
  <li class="collection-item"><i class="material-icons left">settings</i><a href="#">Settings</a></li>
</ul>

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

• material-icons left: আইকন যোগ করতে ব্যবহৃত হয়।
• <a href="#">: লিঙ্ক তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীকে অন্য একটি পৃষ্ঠায় নিয়ে যাবে।

List with Dividers

Materialize CSS এ আপনি লিস্টের মধ্যে divider (বিভাজক) যোগ করে আইটেমগুলোকে আরও ভালভাবে আলাদা করতে পারেন।

<ul class="collection">
  <li class="collection-item">List Item 1</li>
  <li class="collection-item">List Item 2</li>
  <li class="collection-item"><span class="divider"></span>List Item 3</li>
  <li class="collection-item">List Item 4</li>
</ul>

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

• divider: এটি তালিকার মধ্যে একটি দৃশ্যমান বিভাজক তৈরি করে যা আইটেমগুলোকে আলাদা করে।

উপসংহার

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