Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Card এবং Panel এর মতো জনপ্রিয় উপাদানগুলির সাথে ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। এখানে আমরা Card এবং Card Reveal তৈরি করার প্রক্রিয়া এবং তাদের কাস্টমাইজেশন সম্পর্কে আলোচনা করব।
Materialize Card
Materialize Card একটি বক্স স্টাইলের উপাদান, যা সাধারণত তথ্য বা কনটেন্ট দেখানোর জন্য ব্যবহৃত হয়। আপনি এর মধ্যে ছবি, টেক্সট, বাটন এবং অন্যান্য উপাদান ব্যবহার করতে পারেন। Card একটি অত্যন্ত জনপ্রিয় উপাদান, যা সুশৃঙ্খলভাবে কন্টেন্ট উপস্থাপন করতে সহায়ক।
Basic Card Example
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/150">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>This is a simple card.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
এখানে:
- card-image: এটি কার্ডের ছবিটি প্রদর্শন করবে।
- card-title: ছবির ওপর কার্ডের শিরোনাম।
- card-content: এই অংশে টেক্সট বা কনটেন্ট থাকে।
- card-action: এখানে লিঙ্ক বা বাটন থাকে।
Card with Button
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/150">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>This is a simple card with a button.</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
<a href="#" class="btn">Click Me</a>
</div>
</div>
এখানে, আপনি card-action এর মধ্যে একটি button যুক্ত করতে পারেন।
Materialize Card Reveal
Card Reveal হল একটি অত্যন্ত ইন্টারঅ্যাকটিভ ফিচার, যেখানে কার্ডের পিছনে অতিরিক্ত কনটেন্ট লুকানো থাকে এবং যখন ইউজার কার্ডের ওপর ক্লিক করে বা হোভার করে, তখন তা প্রদর্শিত হয়। এটি ব্যবহারকারীর জন্য আরও আকর্ষণীয় অভিজ্ঞতা তৈরি করে।
Card Reveal Example
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/150">
<span class="card-title">Card Title</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>This is revealed content.</p>
</div>
<div class="card-content">
<p>Click to reveal the card content.</p>
</div>
</div>
এখানে:
- card-reveal: এটি লুকানো কনটেন্ট ধারণ করে যা ইউজার ক্লিক করলে বা হোভার করলে প্রদর্শিত হবে।
- close আইকন: এটি কার্ডের রিভিল অংশ বন্ধ করার জন্য ব্যবহৃত হয়।
Card Reveal Using JavaScript
Materialize CSS এর card-reveal সেকশন কার্যকরী করতে JavaScript ব্যবহার করতে হয়। নিচে একটি উদাহরণ দেওয়া হলো:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.card');
var instances = M.Card.init(elems);
});
</script>
এখানে M.Card.init(elems) ব্যবহার করে আপনি সকল card-reveal কার্ডগুলো কার্যকরী করতে পারবেন।
Panel Example in Materialize
Materialize CSS এ panel সাধারণত বক্সের মতো উপাদান, যেখানে আপনার কনটেন্ট যেমন টেক্সট, বাটন, বা চিত্র প্রদর্শিত হয়। এটি মূলত card এর একটি সহজ এবং সিম্পল ভার্সন হিসেবে কাজ করে।
Simple Panel Example
<div class="card-panel teal">
<span class="white-text">This is a simple panel.</span>
</div>
এখানে:
- card-panel: এটি একটি সিম্পল প্যানেল উপাদান।
- teal: এই ক্লাসটি প্যানেলের পটভূমির রঙ পরিবর্তন করবে।
- white-text: এখানে টেক্সটের রঙ সাদা করা হয়েছে।
Panel with Icon and Button
<div class="card-panel orange lighten-1">
<i class="material-icons left">access_alarm</i>
<span class="white-text">Panel with Icon</span>
<a href="#" class="btn-flat white-text">Click Here</a>
</div>
এখানে:
- material-icons: এটি আইকন প্রদর্শন করবে।
- btn-flat: এটি একটি ফ্ল্যাট বাটন তৈরি করবে।
উপসংহার
Materialize CSS এর card এবং panel উপাদানগুলি ওয়েব ডিজাইনকে আরও সুন্দর এবং ইন্টারঅ্যাকটিভ করে তোলে। Card Reveal ফিচার ব্যবহারকারীদের জন্য একটি আকর্ষণীয় অভিজ্ঞতা তৈরি করে, যেখানে অতিরিক্ত কনটেন্ট লুকানো থাকে এবং ইউজারের ক্লিক বা হোভারের মাধ্যমে এটি প্রকাশ পায়। এছাড়াও, panel একটি সহজ এবং প্রাঙ্কটিক্যাল উপাদান যা অনেক সময় ছোট ইনফরমেশন বা নোট প্রকাশের জন্য ব্যবহৃত হয়। Materialize CSS এর এই কম্পোনেন্টগুলো ব্যবহার করে আপনি সুন্দর এবং ফাংশনাল ওয়েব ডিজাইন তৈরি করতে পারবেন।
Read more
