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 এর বৈশিষ্ট্য
- সাজানো এবং প্রফেশনাল ডিজাইন: Collection headers এবং footers ব্যবহার করে আপনি আপনার ওয়েবসাইটে বা অ্যাপে সুন্দর, সুশৃঙ্খল তালিকা তৈরি করতে পারেন।
- সহজ কাস্টমাইজেশন: Materialize CSS আপনাকে icons, buttons, links ইত্যাদি উপাদান ব্যবহার করে collection headers এবং footers কাস্টমাইজ করার সুযোগ দেয়।
- Responsive: Materialize CSS এর collection উপাদানগুলো প্রতিক্রিয়াশীল (responsive), তাই বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।
উপসংহার
Collection headers এবং footers Materialize CSS এর অত্যন্ত কার্যকরী উপাদান, যা আপনার ওয়েবসাইটে বা অ্যাপে সুশৃঙ্খল এবং আকর্ষণীয় তালিকা তৈরি করতে সাহায্য করে। আপনি সহজেই তালিকার শিরোনাম এবং ফুটার কাস্টমাইজ করতে পারেন, আইকন এবং লিঙ্ক যুক্ত করতে পারেন এবং ব্যবহারকারীদের জন্য আরও কার্যকরী নেভিগেশন এবং অ্যাকশন প্রদান করতে পারেন। Materialize CSS ব্যবহার করে এই উপাদানগুলো দ্রুত এবং সহজে তৈরি করা যায়, যা আপনার ডিজাইনের সৌন্দর্য ও কার্যকারিতা বৃদ্ধি করে।
Read more
