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 ব্যবহার করে একাধিক আইটেম বা কনটেন্টকে গ্রুপ করে সুন্দরভাবে উপস্থাপন করা যায়। এই কম্পোনেন্টগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপের ইন্টারফেসকে আরও আকর্ষণীয় এবং ফাংশনাল করতে পারেন।
Read more
