Material Design Lite (MDL) একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Material Design নীতির ওপর ভিত্তি করে তৈরি এবং MDL-এর একটি শক্তিশালী এবং জনপ্রিয় উপাদান হল Card। Cards MDL এ বিভিন্ন তথ্য বা কনটেন্ট উপস্থাপনের জন্য ব্যবহৃত হয়, যা সুন্দরভাবে সাজানো এবং সহজে কাস্টমাইজ করা যায়।
এই টিউটোরিয়ালে, আমরা কাস্টম Card Layouts তৈরি এবং স্টাইলিং সম্পর্কে আলোচনা করব, যাতে আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী কার্ড ব্যবহার করতে পারেন।
MDL Card Layouts তৈরি করা
১. Basic Card Structure
MDL এ একটি বেসিক কার্ড তৈরি করতে, আপনি mdl-card ক্লাস ব্যবহার করবেন। এর মধ্যে বিভিন্ন উপাদান যেমন mdl-card__title, mdl-card__supporting-text, এবং mdl-card__actions ব্যবহার করা হয়।
উদাহরণ: Basic Card Layout
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Basic Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a simple card using Material Design Lite.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Action
</button>
</div>
</div>
এখানে:
- mdl-card: কার্ডের প্রধান ক্লাস।
- mdl-shadow--2dp: কার্ডের চারপাশে একটি ছোট শ্যাডো যোগ করে যাতে এটি উঁচু দেখায়।
- mdl-card__title: কার্ডের শিরোনাম (title) ধারণ করে।
- mdl-card__supporting-text: কার্ডের মূল কনটেন্ট বা টেক্সট।
- mdl-card__actions: কার্ডের নীচে একটি অ্যাকশন বাটন বা অন্য ইন্টারঅ্যাকটিভ উপাদান যুক্ত করতে ব্যবহৃত হয়।
২. Multiple Card Layout
এখন, আমরা একাধিক কার্ড তৈরি করতে চাই, যা একটি গ্রিড লেআউটে সাজানো থাকবে। MDL রেসপন্সিভ গ্রিড সিস্টেম ব্যবহার করে এই কার্ডগুলিকে সুন্দরভাবে সাজানো যায়।
উদাহরণ: Multiple Card Layout
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 1</h2>
</div>
<div class="mdl-card__supporting-text">
Content for the first card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Action 1
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 2</h2>
</div>
<div class="mdl-card__supporting-text">
Content for the second card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Action 2
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 3</h2>
</div>
<div class="mdl-card__supporting-text">
Content for the third card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Action 3
</button>
</div>
</div>
</div>
</div>
এখানে:
- mdl-grid: এটি গ্রিড কন্টেইনার ক্লাস, যা একাধিক mdl-cell এর জন্য ব্যবহৃত হয়।
- mdl-cell: প্রতিটি কার্ডের জন্য একটি সেল তৈরি করে, যেখানে mdl-cell--4-col এই সেলটির আকার ৪ কলামে ভাগ করা হয়।
৩. Image in Card
MDL কার্ডে ছবি যোগ করা খুবই সহজ। আপনি mdl-card__media ক্লাস ব্যবহার করে একটি ছবি যুক্ত করতে পারেন। এটি কার্ডের উপরের অংশে একটি ছবি প্রদর্শন করবে।
উদাহরণ: Image in Card
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img src="image.jpg" alt="Image" />
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card with Image</h2>
</div>
<div class="mdl-card__supporting-text">
This card contains an image.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</button>
</div>
</div>
এখানে:
- mdl-card__media: এই ক্লাসটি ছবি বা মিডিয়া উপাদানটি কার্ডে যুক্ত করার জন্য ব্যবহৃত হয়।
- img: ইমেজ উপাদান যেখানে আপনি ছবি যুক্ত করতে পারবেন।
Custom Card Styling
১. Custom Card Size
MDL কার্ডের সাইজ কাস্টমাইজ করতে, আপনি mdl-card--small বা mdl-card--large ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: Custom Card Size
<div class="mdl-card mdl-shadow--2dp mdl-card--small">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Small Card</h2>
</div>
<div class="mdl-card__supporting-text">
This is a small card.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Action
</button>
</div>
</div>
এখানে:
- mdl-card--small: এটি কার্ডের সাইজ ছোট করে।
২. Custom Card Background Color
MDL কার্ডের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন।
উদাহরণ: Custom Background Color
<div class="mdl-card mdl-shadow--2dp" style="background-color: #4CAF50;">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card with Custom Background Color</h2>
</div>
<div class="mdl-card__supporting-text">
This card has a custom background color.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</button>
</div>
</div>
এখানে:
- style="background-color: #4CAF50;": এটি কার্ডের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে ব্যবহৃত হয়েছে।
সারাংশ
MDL-এ Custom Card Layouts তৈরি এবং স্টাইলিং খুবই সহজ এবং কাস্টমাইজযোগ্য। MDL বিভিন্ন ধরনের কার্ড কম্পোনেন্ট সরবরাহ করে, যা আপনি আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। আমরা দেখলাম কিভাবে Basic Cards, Multiple Card Layouts, Image in Card, এবং Custom Card Styling তৈরি করা যায়। MDL এর গ্রিড সিস্টেম এবং বিভিন্ন স্টাইল ক্লাস ব্যবহার করে আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী কার্ড লেআউট তৈরি করতে পারবেন।
Read more
