Material Design Lite (MDL) একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL অনেক প্রাক-ডিফাইনড UI কম্পোনেন্ট সরবরাহ করে, তার মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হল Card। MDL এর Card Component হল একটি ইউজার ইন্টারফেস উপাদান যা বিভিন্ন তথ্য উপস্থাপন করার জন্য ব্যবহার করা হয়। এটি সাধারণত ইমেজ, টেক্সট, এবং অ্যাকশন বাটনসহ এক বা একাধিক সেকশন ধারণ করে।
MDL-এর Card কম্পোনেন্ট খুবই সহজে কাস্টমাইজ করা যায় এবং এটি ওয়েব পেজের ডিজাইনে আকর্ষণীয় এবং কার্যকরী উপাদান হিসেবে কাজ করে।
MDL Card Component এর মূল বৈশিষ্ট্য
MDL Card Component-এ কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:
- ফ্ল্যাট এবং আধুনিক ডিজাইন: MDL Card কম্পোনেন্টটি Material Design নীতির ভিত্তিতে ডিজাইন করা, যা এতে সোজা লাইন এবং সিম্পল স্টাইল তৈরি করে।
- প্রতিক্রিয়াশীল (Responsive): Card কম্পোনেন্টটি রেসপন্সিভ ডিজাইন সমর্থন করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে ভালভাবে কাজ করে।
- সহজ কাস্টমাইজেশন: আপনি সহজেই Card এর স্টাইল, কন্টেন্ট এবং অ্যাকশন বাটন কাস্টমাইজ করতে পারেন।
- অ্যানিমেশন: MDL Card কম্পোনেন্টে সাধারণত কিছু অ্যানিমেশন থাকে, যেমন যখন আপনি মাউসের উপর কার্ডটি রাখেন, এটি একটি সামান্য হোভার এফেক্ট দেখায়।
MDL Card Component ব্যবহার করা
এখানে MDL Card কম্পোনেন্ট ব্যবহারের একটি সহজ উদাহরণ দেওয়া হলো। এই উদাহরণে একটি কার্ড তৈরি করা হয়েছে, যার মধ্যে একটি টাইটেল, কিছু টেক্সট, একটি ইমেজ এবং একটি অ্যাকশন বাটন রয়েছে।
উদাহরণ: Basic Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Card Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Card Component -->
<div class="mdl-card mdl-shadow--2dp" style="width: 320px; margin: 20px;">
<!-- Card Title -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Material Design Card</h2>
</div>
<!-- Card Content -->
<div class="mdl-card__supporting-text">
This is a simple card component in Material Design Lite. You can add text, images, and actions here.
</div>
<!-- Card Action -->
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</button>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
Card এর অংশবিশেষ
- mdl-card: এটি মূল Card কম্পোনেন্টের ক্লাস।
- mdl-card__title: এই ক্লাসটি কার্ডের টাইটেল সেকশনটির জন্য ব্যবহৃত হয়।
- mdl-card__supporting-text: এটি কার্ডের প্রধান টেক্সট কন্টেন্টের জন্য ব্যবহৃত হয়।
- mdl-card__actions: এই ক্লাসটি অ্যাকশন বাটন এবং অন্যান্য ইন্টারঅ্যাকটিভ উপাদান যেমন লিঙ্ক বা বাটনগুলোর জন্য ব্যবহৃত হয়।
MDL Card Component এর কাস্টমাইজেশন
MDL Card কম্পোনেন্টটি সহজে কাস্টমাইজ করা যায়। আপনি এর সাইজ, কালার, শেডিং এবং কনটেন্ট সহজে পরিবর্তন করতে পারেন।
উদাহরণ: কাস্টমাইজড Card
<div class="mdl-card mdl-shadow--3dp" style="width: 350px; margin: 20px;">
<!-- Card Title -->
<div class="mdl-card__title mdl-card--expand" style="background-color: #3f51b5; color: white;">
<h2 class="mdl-card__title-text">Custom Card</h2>
</div>
<!-- Card Content -->
<div class="mdl-card__supporting-text">
This card has a custom background color, padding, and text style.
</div>
<!-- Card Action -->
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Read More
</button>
</div>
</div>
এখানে কিছু কাস্টমাইজেশন করা হয়েছে:
- mdl-card--expand: এটি কার্ডটিকে বড় এবং আরও আকর্ষণীয় করে তোলে।
- background-color: টাইটেল সেকশনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
- mdl-shadow--3dp: শ্যাডো এর গভীরতা বাড়ানো হয়েছে, যা কার্ডটিকে আরো উজ্জ্বল এবং ডিপ আউটলুক দেয়।
সারাংশ
MDL Card Component ব্যবহার করে আপনি আপনার ওয়েবসাইটে আধুনিক এবং আকর্ষণীয় UI উপাদান তৈরি করতে পারেন। এটি সহজে কাস্টমাইজযোগ্য এবং বিভিন্ন ধরনের তথ্য যেমন টেক্সট, ছবি, বাটন ইত্যাদি প্রদর্শন করার জন্য আদর্শ। MDL Card কম্পোনেন্ট ব্যবহার করে, আপনি আপনার ওয়েবসাইটের ডিজাইনকে আরও উন্নত এবং ইউজার-ফ্রেন্ডলি করতে পারবেন।
Read more
