Materialize এর Collections এবং Lists

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Material Design এর নীতির উপর ভিত্তি করে তৈরি। এতে Collections এবং Lists এর জন্য প্রি-ডিফাইন্ড স্টাইল এবং ফিচার রয়েছে, যা ওয়েবসাইট বা অ্যাপ্লিকেশনে কন্টেন্ট সুন্দরভাবে প্রদর্শন করতে সাহায্য করে। Collections এবং Lists সাধারণত বিভিন্ন আইটেমকে একটি সুসংগঠিত উপস্থাপনায় দেখানোর জন্য ব্যবহৃত হয়।

Collections এবং Lists কি?

• Collections: Collection হলো একটি group বা list যেখানে একাধিক আইটেম থাকে। Materialize এ Collections সাধারণত স্টাইলড list বা grouped items হিসেবে ব্যবহৃত হয়।
• Lists: List হলো একটি ordered বা unordered তালিকা, যেখানে এক বা একাধিক উপাদান থাকে। Materialize CSS এ তালিকার জন্য সুন্দর স্টাইল এবং রঙিন আইকনসহ স্টাইল তৈরির সুবিধা রয়েছে।

Collections তৈরি করা

Collections ব্যবহার করে আপনি বিভিন্ন ধরনের আইটেম বা উপাদানকে সুন্দরভাবে গ্রুপ করতে পারেন। Materialize CSS এ collection তৈরি করার জন্য একটি সহজ HTML স্ট্রাকচার ব্যবহার করা হয়।

Collection এর HTML কোড:

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

এখানে:

• ul.collection: এটি একটি তালিকা তৈরি করবে, যেখানে প্রতিটি উপাদান একটি collection-item হবে।
• li.collection-item: প্রতিটি তালিকা আইটেম, যা আলাদাভাবে একটি উপাদান হিসেবে প্রদর্শিত হবে।

Collection with Links:

Materialize CSS এ আপনি links সহ collection-item তৈরি করতে পারেন, যেমন:

<ul class="collection">
  <li class="collection-item"><a href="#!">Link 1</a></li>
  <li class="collection-item"><a href="#!">Link 2</a></li>
  <li class="collection-item"><a href="#!">Link 3</a></li>
  <li class="collection-item"><a href="#!">Link 4</a></li>
</ul>

এখানে, a ট্যাগের মাধ্যমে প্রতিটি collection-item কে একটি ক্লিকযোগ্য লিঙ্কে রূপান্তরিত করা হয়েছে।

Collection with Icons:

আপনি চাইলে collection-item এর সাথে আইকন যোগ করতে পারেন, যা আইটেমগুলোকে আরো আকর্ষণীয় এবং তথ্যবহুল করে তোলে।

<ul class="collection">
  <li class="collection-item"><i class="material-icons left">home</i>Home</li>
  <li class="collection-item"><i class="material-icons left">person</i>Profile</li>
  <li class="collection-item"><i class="material-icons left">settings</i>Settings</li>
  <li class="collection-item"><i class="material-icons left">logout</i>Logout</li>
</ul>

এখানে, material-icons ক্লাসের মাধ্যমে আইকন যোগ করা হয়েছে, যা left ক্লাসের মাধ্যমে আইকনের অবস্থান নিয়ন্ত্রণ করা হয়েছে।

Lists তৈরি করা

Lists ব্যবহার করে আপনি বিভিন্ন আইটেমের তালিকা তৈরি করতে পারেন। Materialize CSS এ unordered (ul) এবং ordered (ol) তালিকা উভয়ই সমর্থিত।

Unordered List (ul):

<ul class="collection with-header">
  <li class="collection-header"><h4>List Header</h4></li>
  <li class="collection-item">Item 1</li>
  <li class="collection-item">Item 2</li>
  <li class="collection-item">Item 3</li>
</ul>

এখানে:

• ul.collection: একটি unordered তালিকা তৈরি করা হয়েছে, যেখানে with-header ক্লাস ব্যবহার করা হয়েছে একটি হেডার যুক্ত করার জন্য।
• li.collection-item: প্রতিটি তালিকা আইটেম।

Ordered List (ol):

<ol class="collection">
  <li class="collection-item">Step 1: Prepare materials</li>
  <li class="collection-item">Step 2: Follow instructions</li>
  <li class="collection-item">Step 3: Finish the task</li>
</ol>

এখানে, ol.collection ব্যবহার করে একটি ordered তালিকা তৈরি করা হয়েছে।

Custom Lists with Badges:

Materialize CSS এ আপনি badge ব্যবহার করে তালিকার আইটেমগুলোর পাশে সংখ্যা বা টেক্সট যোগ করতে পারেন, যা তালিকাকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করে তোলে।

<ul class="collection">
  <li class="collection-item">Item 1 <span class="new badge" data-badge-caption="new">4</span></li>
  <li class="collection-item">Item 2 <span class="badge">3</span></li>
  <li class="collection-item">Item 3 <span class="badge">1</span></li>
</ul>

এখানে, badge ক্লাস ব্যবহার করা হয়েছে আইটেমের পাশে সংখ্যা প্রদর্শন করার জন্য।

Collections এবং Lists এর মধ্যে পার্থক্য

• Collections সাধারণত unordered list বা grouped items হিসেবে কাজ করে, যা সাধারণত লিঙ্ক বা স্টাইলড তালিকা হিসেবে ব্যবহৃত হয়।
• Lists মূলত সাধারণ তালিকা হিসাবে ব্যবহৃত হয়, যা ordered বা unordered হতে পারে এবং আইটেমগুলোর মধ্যে একটি ধারাবাহিকতা তৈরি করে।

উপসংহার

Materialize CSS এর Collections এবং Lists কম্পোনেন্টগুলো ওয়েব ডিজাইন এবং ডেভেলপমেন্টে অত্যন্ত কার্যকরী। আপনি Collections ব্যবহার করে বিভিন্ন আইটেমকে সুন্দরভাবে গ্রুপ করতে পারেন, এবং Lists ব্যবহার করে আপনার কন্টেন্টকে সাজানোর জন্য একাধিক বিকল্প পেতে পারেন। এগুলো ওয়েবসাইটের ইউজার ইন্টারফেসে আরও আকর্ষণীয়তা এবং ব্যবহারযোগ্যতা যোগ করতে সহায়ক। Materialize এর এই সহজ ও কার্যকরী কম্পোনেন্টগুলো আপনার ডিজাইনকে আরো উন্নত করতে সাহায্য করবে।

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 এর এই উপাদানগুলো ব্যবহারের মাধ্যমে আপনি ওয়েব ডিজাইনকে আরও আকর্ষণীয় ও কার্যকরী করে তুলতে পারবেন।

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 তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।

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

Collection headers সাধারণত তালিকার শিরোনাম হিসেবে ব্যবহৃত হয় এবং footers ওয়েবপেজের নিচের অংশে সাধারণত কপিরাইট বা অন্যান্য তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS এ এই উপাদানগুলো তৈরি করা সহজ এবং কাস্টমাইজেবল।

Collection Headers

Collection headers সাধারণত ওয়েবপেজের তালিকায় একটি বিভাগ বা সেকশনের শিরোনাম হিসেবে ব্যবহৃত হয়। Materialize CSS এ এটি ব্যবহার করে আপনি একটি সুন্দর এবং সুসংগঠিত তালিকা তৈরি করতে পারেন।

১. Collection Header Example

<ul class="collection">
  <li class="collection-header"><h4>My Collection</h4></li>
  <li class="collection-item">Item 1</li>
  <li class="collection-item">Item 2</li>
  <li class="collection-item">Item 3</li>
</ul>

এখানে:

• collection ক্লাসটি একটি সাধারণ তালিকা তৈরি করে।
• collection-header ক্লাসটি তালিকার শিরোনাম বা হেডার হিসেবে ব্যবহৃত হয়।
• collection-item ক্লাসটি তালিকার প্রতিটি আইটেমের জন্য ব্যবহৃত হয়।

২. Collection Header with Icon

Materialize CSS এর collection-header এর সাথে আপনি iconও ব্যবহার করতে পারেন, যা হেডারের আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ তৈরি করে।

<ul class="collection">
  <li class="collection-header">
    <i class="material-icons left">folder</i>
    <h4>My Documents</h4>
  </li>
  <li class="collection-item">Document 1</li>
  <li class="collection-item">Document 2</li>
  <li class="collection-item">Document 3</li>
</ul>

এখানে:

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

Collection Footers

Collection footers সাধারণত একটি তালিকার নিচে প্রদর্শিত হয় এবং সেখানে আপনি সাধারণত অতিরিক্ত তথ্য বা নেভিগেশন লিঙ্ক রাখতে পারেন। Materialize CSS এ collection-footer ক্লাস ব্যবহার করে সহজেই ফুটার তৈরি করা সম্ভব।

১. Collection Footer Example

<ul class="collection">
  <li class="collection-item">Item 1</li>
  <li class="collection-item">Item 2</li>
  <li class="collection-item">Item 3</li>
  <li class="collection-footer"><a href="#!">See more</a></li>
</ul>

এখানে:

• collection-footer ক্লাসটি তালিকার ফুটার হিসেবে ব্যবহৃত হয়।
• a href="#!" লিঙ্কটি ফুটারের মধ্যে প্রদর্শিত হয় এবং এটি ব্যবহারকারীদের আরও তথ্য দেখানোর জন্য নির্দেশ করে।

২. Collection Footer with Action Button

আপনি collection-footer এ action button যুক্ত করতে পারেন, যা ব্যবহারকারীদের একটি অ্যাকশন সম্পাদন করতে সহায়ক।

<ul class="collection">
  <li class="collection-item">Item 1</li>
  <li class="collection-item">Item 2</li>
  <li class="collection-item">Item 3</li>
  <li class="collection-footer">
    <a href="#!" class="waves-effect waves-light btn">Add Item</a>
  </li>
</ul>

এখানে:

• waves-effect waves-light btn ক্লাসটি একটি বাটন তৈরি করে যা Materialize CSS এর ওয়েভ এফেক্ট প্রভাবিত করে।

Collection Headers এবং Footers এর বৈশিষ্ট্য

1. সাজানো এবং প্রফেশনাল ডিজাইন: Collection headers এবং footers ব্যবহার করে আপনি আপনার ওয়েবসাইটে বা অ্যাপে সুন্দর, সুশৃঙ্খল তালিকা তৈরি করতে পারেন।
2. সহজ কাস্টমাইজেশন: Materialize CSS আপনাকে icons, buttons, links ইত্যাদি উপাদান ব্যবহার করে collection headers এবং footers কাস্টমাইজ করার সুযোগ দেয়।
3. Responsive: Materialize CSS এর collection উপাদানগুলো প্রতিক্রিয়াশীল (responsive), তাই বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।

উপসংহার

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

Materialize CSS একটি আধুনিক front-end framework যা Material Design এর নীতির উপর ভিত্তি করে তৈরি। এই ফ্রেমওয়ার্কে অনেক ধরনের উপাদান এবং কম্পোনেন্ট রয়েছে, যার মধ্যে Avatar List এবং Collection Grouping অত্যন্ত জনপ্রিয়। Avatar List ব্যবহারকারীদের ছবি প্রদর্শন করতে সাহায্য করে, আর Collection Grouping ব্যবহারকারীদের বিভিন্ন আইটেম বা কনটেন্টকে গ্রুপ করে দেখানোর জন্য ব্যবহৃত হয়। এখানে আমরা Avatar List এবং Collection Grouping এর ব্যবহার এবং কনফিগারেশন নিয়ে আলোচনা করব।

Avatar List তৈরি করা

Avatar List হলো এমন একটি উপাদান যেখানে ব্যবহারকারীদের ছোট আকারের ছবি (অথবা অ্যাভাটার) প্রদর্শিত হয়। এটি সাধারণত প্রোফাইল পিকচার বা ব্যবহারকারীদের পরিচিতি প্রদর্শনের জন্য ব্যবহৃত হয়।

১. Avatar List তৈরি করা:

Materialize CSS-এ Avatar List তৈরি করতে collection কম্পোনেন্ট ব্যবহার করা হয়, যা সহজেই কাস্টমাইজ করা যায়। উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Avatar List</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="collection">
    <li class="collection-item avatar">
      <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="" class="circle">
      <span class="title">John Doe</span>
      <p>Web Developer</p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="" class="circle">
      <span class="title">Jane Smith</span>
      <p>Graphic Designer</p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="" class="circle">
      <span class="title">Mark Wilson</span>
      <p>Project Manager</p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
  </ul>

  <script>
    // Initialize Materialize components
    $(document).ready(function(){
      // Any necessary initialization can go here
    });
  </script>

</body>
</html>

এখানে:

• collection-item avatar: এই ক্লাসের মাধ্যমে সেল বা আইটেমগুলোকে অ্যাভাটারের সাথে প্রদর্শন করা হয়।
• circle: ছবির আকৃতিকে গোলাকার করে তুলতে এই ক্লাস ব্যবহার করা হয়।
• secondary-content: আইটেমের শেষে আইকন প্রদর্শন করতে এই ক্লাস ব্যবহার করা হয়।

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

• আপনি অ্যাভাটারের আকার, বর্ডার বা শ্যাডো কাস্টমাইজ করতে পারেন।
• material-icons আইকন ব্যবহার করে অ্যাভাটারের সাথে অতিরিক্ত ইন্টারঅ্যাকটিভ ফিচার যোগ করা যেতে পারে, যেমন "favorite" বা "message" আইকন।

Collection Grouping তৈরি করা

Collection Grouping হলো একটি কন্টেইনার বা লিস্ট যেখানে বিভিন্ন উপাদান বা আইটেম গ্রুপ করা হয়। এটি সাধারণত একটি বড় পরিসরের কন্টেন্ট বা সেগমেন্টের মধ্যে আইটেমগুলোকে সংগঠিতভাবে উপস্থাপন করতে ব্যবহৃত হয়। Materialize CSS-এ Collection কম্পোনেন্ট ব্যবহার করে এটি খুব সহজেই তৈরি করা যায়।

১. Collection Grouping তৈরি করা:

Collection grouping করার জন্য collection ক্লাস এবং collection-header ক্লাস ব্যবহার করা হয়, যার মাধ্যমে আপনি গ্রুপের শিরোনাম এবং আইটেমগুলোকে সুন্দরভাবে উপস্থাপন করতে পারবেন।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Collection Grouping</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="collection with-header">
    <li class="collection-header"><h4>Friends</h4></li>
    <li class="collection-item">John Doe</li>
    <li class="collection-item">Jane Smith</li>
    <li class="collection-item">Mark Wilson</li>
  </ul>

  <ul class="collection with-header">
    <li class="collection-header"><h4>Family</h4></li>
    <li class="collection-item">Alice Johnson</li>
    <li class="collection-item">Robert Brown</li>
    <li class="collection-item">Mary White</li>
  </ul>

  <script>
    // Initialize Materialize components
    $(document).ready(function(){
      // Any necessary initialization can go here
    });
  </script>

</body>
</html>

এখানে:

• collection-header: এই ক্লাসটি শিরোনাম হিসেবে ব্যবহার করা হয়। এতে আপনি একটি গ্রুপের নাম নির্ধারণ করতে পারেন, যেমন Friends বা Family।
• with-header: এই ক্লাসটি collection এর মধ্যে শিরোনাম সংযুক্ত করতে ব্যবহৃত হয়।
• collection-item: এটি প্রতিটি আইটেম বা সদস্যের জন্য ব্যবহৃত হয়।

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

• নতুন আইটেম যুক্ত করা: আপনি আরও নতুন আইটেম যোগ করতে পারেন এবং তাদের জন্য আলাদা আলাদা শিরোনাম তৈরি করতে পারেন।
• Icons and Actions: Collection আইটেমের সাথে আইকন বা অন্যান্য অ্যাকশন যুক্ত করতে পারেন।

<ul class="collection with-header">
  <li class="collection-header"><h4>Recent Activities</h4></li>
  <li class="collection-item avatar">
    <i class="material-icons circle">message</i>
    <span class="title">You have a new message</span>
    <p>2 hours ago</p>
    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
  </li>
  <li class="collection-item avatar">
    <i class="material-icons circle">cloud</i>
    <span class="title">File uploaded successfully</span>
    <p>3 hours ago</p>
    <a href="#!" class="secondary-content"><i class="material-icons">cloud_done</i></a>
  </li>
</ul>

এখানে:

• avatar: প্রতিটি আইটেমের জন্য আইকন বা অ্যাভাটারের স্টাইলিং।
• secondary-content: আইটেমের শেষে অ্যাকশন বা অতিরিক্ত ফিচার যোগ করার জন্য।

উপসংহার

Avatar List এবং Collection Grouping হল এমন দুটি উপাদান যা Materialize CSS এর মাধ্যমে খুব সহজেই তৈরি এবং কাস্টমাইজ করা যায়। Avatar List সাধারণত ব্যবহারকারীদের ছবি বা অ্যাভাটার প্রদর্শন করতে ব্যবহৃত হয়, এবং Collection Grouping ব্যবহার করে একাধিক আইটেম বা কনটেন্টকে গ্রুপ করে সুন্দরভাবে উপস্থাপন করা যায়। এই কম্পোনেন্টগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপের ইন্টারফেসকে আরও আকর্ষণীয় এবং ফাংশনাল করতে পারেন।