মিডিয়া কার্ড এবং কন্টেইনার (Media Card and Containers)

Material Design Lite (MDL) একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL-এ মিডিয়া কার্ড (Media Cards) এবং কন্টেইনার (Containers) ব্যবহারের মাধ্যমে একটি ওয়েব পেজের কন্টেন্টকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করা যায়। এই টিউটোরিয়ালে, আমরা MDL-এর মিডিয়া কার্ড এবং কন্টেইনার সম্পর্কে বিস্তারিত আলোচনা করব এবং দেখব কিভাবে এগুলো ব্যবহার করা যায়।

মিডিয়া কার্ড (Media Cards)

মিডিয়া কার্ড হল একটি গুরুত্বপূর্ণ UI কম্পোনেন্ট যা মূলত ইমেজ, ভিডিও, টেক্সট এবং অন্যান্য কন্টেন্টকে একটি সুশৃঙ্খল ফরম্যাটে প্রদর্শন করতে ব্যবহৃত হয়। MDL-এর মিডিয়া কার্ডে ছবি, টেক্সট, বাটন, আইকন, এবং অন্যান্য মিডিয়া উপাদান অন্তর্ভুক্ত করা যায়। এগুলো ওয়েব পেজের ডিজাইনকে প্রফেশনাল এবং আধুনিক করে তোলে।

MDL-এ মিডিয়া কার্ড তৈরি করা

MDL-এর মাধ্যমে একটি মিডিয়া কার্ড তৈরি করতে হলে, আপনাকে mdl-card এবং mdl-card__title, mdl-card__supporting-text ইত্যাদি ক্লাস ব্যবহার করতে হবে।

উদাহরণ:

<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Beautiful Scenery</h2>
  </div>
  <div class="mdl-card__supporting-text">
    This is a beautiful scenery from the mountains.
  </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>

এটি একটি Media Card তৈরি করবে, যেখানে:

• mdl-card: কার্ডের সাধারণ স্টাইল।
• mdl-card__title: কার্ডের শিরোনাম (যেমন এখানে "Beautiful Scenery")।
• mdl-card__supporting-text: কার্ডের বেসিক টেক্সট কন্টেন্ট।
• mdl-card__actions: কার্যকরী বাটন যেমন "Learn More"।

MDL মিডিয়া কার্ড কাস্টমাইজেশন

MDL মিডিয়া কার্ডের ডিজাইন কাস্টমাইজ করতে আপনি বিভিন্ন ক্লাস ব্যবহার করতে পারেন। উদাহরণস্বরূপ, mdl-shadow--2dp ক্লাস ব্যবহার করে আপনি কার্ডটির গভীরতা এবং শ্যাডো পরিবর্তন করতে পারবেন, যা ডিজাইনকে আরো আকর্ষণীয় করে তোলে।

<div class="mdl-card mdl-shadow--4dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Explore the Ocean</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Discover the hidden treasures of the deep ocean.
  </div>
  <div class="mdl-card__actions">
    <button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
      View Details
    </button>
  </div>
</div>

এখানে mdl-shadow--4dp ব্যবহার করা হয়েছে, যা কার্ডের গভীরতা বাড়িয়ে আরো স্টাইলিশ এবং ইন্টারঅ্যাকটিভ করে তোলে।

কন্টেইনার (Containers)

কন্টেইনার (Containers) হল এমন একটি উপাদান যা বিভিন্ন ধরনের কন্টেন্টকে সুন্দরভাবে সাজিয়ে রাখতে ব্যবহৃত হয়। MDL-এ k-ডিভাইডার এবং k-শীট কন্টেইনারগুলোর মাধ্যমে আপনি সহজে ওয়েব পেজের বিভিন্ন এলিমেন্টকে একটি সুসংগঠিত আকারে সাজাতে পারবেন।

MDL কন্টেইনার ব্যবহার

MDL-এ কন্টেইনার ব্যবহার করতে, mdl-grid এবং mdl-cell ক্লাস ব্যবহার করা হয়। এর মাধ্যমে আপনি একটি রেসপন্সিভ গ্রিড সিস্টেম তৈরি করতে পারেন, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

উদাহরণ:

<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">
        This is the first card in the container.
      </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">
        This is the second card in the container.
      </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">
        This is the third card in the container.
      </div>
    </div>
  </div>
</div>

এখানে:

• mdl-grid: এটি একটি গ্রিড সিস্টেম তৈরি করে, যাতে বিভিন্ন এলিমেন্টকে নির্দিষ্ট সাইজে সাজানো যায়।
• mdl-cell mdl-cell--4-col: এই ক্লাসটি ব্যবহার করে, প্রতিটি কার্ডের জন্য ৪ কলাম বরাদ্দ করা হয়েছে।

MDL কন্টেইনার কাস্টমাইজেশন

MDL কন্টেইনারের সাইজ, মার্জিন, এবং প্যাডিং পরিবর্তন করতে আপনি CSS কাস্টমাইজেশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

.mdl-grid {
  margin: 0;
  padding: 20px;
}
.mdl-card {
  margin-bottom: 20px;
}

এটি কন্টেইনারের মার্জিন এবং প্যাডিং সামঞ্জস্য করতে সাহায্য করবে।

মিডিয়া কার্ড এবং কন্টেইনারের সুবিধা

১. ব্যবহারকারী বান্ধব

MDL-এর মিডিয়া কার্ড এবং কন্টেইনার ব্যবহারের মাধ্যমে ওয়েব ডিজাইন আরো ব্যবহারকারী বান্ধব এবং ইন্টারঅ্যাকটিভ হয়। এটি কন্টেন্ট প্রদর্শন এবং ইন্টারঅ্যাকশনকে সহজ এবং আকর্ষণীয় করে তোলে।

২. রেসপন্সিভ ডিজাইন

MDL কন্টেইনার এবং গ্রিড সিস্টেম ব্যবহার করে ওয়েব পেজটি রেসপন্সিভ ডিজাইন এ পরিণত হয়, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সব জায়গায় ভালোভাবে প্রদর্শিত হয়।

৩. আধুনিক এবং স্টাইলিশ ডিজাইন

MDL মিডিয়া কার্ড এবং কন্টেইনারের মাধ্যমে আপনি একটি আধুনিক এবং স্টাইলিশ ওয়েবসাইট তৈরি করতে পারবেন, যা ব্যবহারকারীদের আকৃষ্ট করবে।

৪. সহজ কাস্টমাইজেশন

MDL-এর মিডিয়া কার্ড এবং কন্টেইনার সহজেই কাস্টমাইজ করা যায়, যা আপনাকে আপনার ওয়েবসাইটের ডিজাইন এবং স্টাইল অনুযায়ী পরিমার্জন করতে সহায়তা করে।

সারাংশ

Material Design Lite (MDL) এর মিডিয়া কার্ড এবং কন্টেইনার ওয়েব ডিজাইনে একটি অত্যন্ত শক্তিশালী এবং কার্যকরী কম্পোনেন্ট। MDL-এর মাধ্যমে আপনি সহজেই একটি আকর্ষণীয় এবং রেসপন্সিভ মিডিয়া কার্ড তৈরি করতে পারবেন যা ইমেজ, টেক্সট, বাটন এবং অন্যান্য উপাদান সংযুক্ত করতে সক্ষম। কন্টেইনার ব্যবহারের মাধ্যমে আপনি আপনার কন্টেন্টকে সুশৃঙ্খলভাবে সাজাতে পারবেন। MDL-এর এই কম্পোনেন্টগুলো ওয়েব ডিজাইনকে আধুনিক, কার্যকরী এবং ব্যবহারকারী বান্ধব করে তোলে।

Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা সহজেই আধুনিক এবং ব্যবহারকারী বান্ধব ওয়েব ডিজাইন তৈরি করতে সহায়তা করে। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হল Media Card, যা বিশেষভাবে মিডিয়া কন্টেন্ট (যেমন ইমেজ, ভিডিও, অডিও) প্রদর্শনের জন্য ডিজাইন করা হয়েছে। MDL এ Media Card একটি সুন্দর, আধুনিক এবং কার্যকরী উপাদান যা কন্টেন্টের সাথে ইন্টারঅ্যাক্টিভ এবং দৃষ্টিনন্দন অভিজ্ঞতা প্রদান করে।

Material Design এর Media Card কনসেপ্ট

Media Card গুগলের Material Design নীতিতে একটি কম্পোনেন্ট যা সাধারণত একটি ছবি, টেক্সট এবং অন্যান্য সম্পর্কিত কন্টেন্ট (যেমন শিরোনাম, বর্ণনা, অ্যাকশন বাটন ইত্যাদি) একত্রিত করে। এটি অনেক ধরনের কন্টেন্ট প্রদর্শনে ব্যবহার করা যেতে পারে, যেমন ব্লগ পোস্ট, নিউজ আর্টিকেল, প্রোডাক্ট, ফটো গ্যালারী, ইত্যাদি।

MDL এ Media Card কম্পোনেন্ট তৈরি করা খুবই সহজ এবং এটি ওয়েব পেজে এক ধরনের cards-based layout প্রদান করে, যা ব্যবহারকারীকে সহজে কন্টেন্ট অ্যাক্সেস করতে এবং ভিজ্যুয়াল অভিজ্ঞতা উপভোগ করতে সহায়তা করে।

MDL এ Media Card তৈরি করা

এখানে একটি সিম্পল Media Card এর উদাহরণ দেওয়া হলো যা MDL এর প্রাক-ডিফাইনড ক্লাস ব্যবহার করে তৈরি করা হয়েছে।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Media Card Example</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <!-- Media Card -->
  <div class="mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <img src="https://via.placeholder.com/350x150" alt="Card Image" class="mdl-card__media">
      <h2 class="mdl-card__title-text">Card Title</h2>
    </div>
    <div class="mdl-card__supporting-text">
      This is a simple media card using Material Design Lite. It can include text, images, or other media.
    </div>
    <div class="mdl-card__actions">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
        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>

উপাদান বিশ্লেষণ:

• mdl-card: এটি MDL এর মূল card ক্লাস। এটি একটি সাধারণ কার্ড কম্পোনেন্ট তৈরি করে।
• mdl-card__title: এই ক্লাসটি কার্ডের শিরোনাম এলাকা নির্দেশ করে, যেখানে ইমেজ এবং টেক্সট থাকে।
• mdl-card__media: এটি একটি মিডিয়া এলিমেন্ট যা ছবি, ভিডিও বা অন্যান্য মিডিয়া কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়।
• mdl-card__supporting-text: এখানে আপনি টেক্সট বা বর্ণনা দিতে পারেন, যা কার্ডের সহায়ক তথ্য হিসেবে প্রদর্শিত হবে।
• mdl-card__actions: এটি একটি একশন এলাকা যা সাধারণত বাটন বা অন্যান্য ইন্টারঅ্যাক্টিভ উপাদান ধারণ করে।

MDL Media Card এর বৈশিষ্ট্য

১. প্রতিক্রিয়া এবং রেসপন্সিভ ডিজাইন

MDL এর Media Card গুলি রেসপন্সিভ ডিজাইন সমর্থন করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে একরকম ভালভাবে প্রদর্শিত হয়। এতে ইমেজ এবং কন্টেন্ট সাইজ অটোমেটিকভাবে স্ক্রীন সাইজ অনুসারে অ্যাডজাস্ট হয়ে যায়।

২. শেডিং এবং গভীরতা

MDL এর Media Card গুলি ব্যবহারকারীকে গভীরতার অনুভূতি প্রদান করতে shadow effect ব্যবহার করে। এটি ডিজাইনে একটি সুন্দর প্রাকৃতিক ইফেক্ট যোগ করে।

৩. কাস্টমাইজেশন

MDL-এর Media Card কাস্টমাইজ করা সহজ। আপনি ইমেজ, টেক্সট, বাটন এবং অন্যান্য উপাদান সহজে পরিবর্তন করতে পারেন। MDL এর ক্লাসের মাধ্যমে আপনি ডিজাইন এবং ফাংশনালিটি কাস্টমাইজ করতে পারবেন।

৪. সহজ একশন বাটন

Media Card-এ একশন বাটন যুক্ত করা যেতে পারে, যা ব্যবহারকারীকে একটি নির্দিষ্ট কার্যকলাপে নিয়ে যেতে সাহায্য করে, যেমন "Learn More", "Buy Now", ইত্যাদি।

৫. মিডিয়া সমর্থন

Media Card ইমেজ, ভিডিও বা অন্যান্য মিডিয়া উপাদানকে সুন্দরভাবে প্রদর্শন করতে সক্ষম। আপনি সিলেক্টেড মিডিয়া টাইপের জন্য বিভিন্ন মিডিয়া ফরম্যাট ব্যবহার করতে পারেন।

Media Card কাস্টমাইজেশন

MDL এর Media Card কম্পোনেন্টটি সহজে কাস্টমাইজ করা যায়। আপনি ইমেজ সাইজ, টেক্সট, বাটন স্টাইল ইত্যাদি পরিবর্তন করতে পারবেন।

উদাহরণ: কাস্টমাইজড Media Card

<div class="mdl-card mdl-shadow--4dp">
  <div class="mdl-card__title">
    <img src="https://via.placeholder.com/350x150" alt="Card Image" class="mdl-card__media">
    <h2 class="mdl-card__title-text">Custom Media Card</h2>
  </div>
  <div class="mdl-card__supporting-text">
    This is a custom media card. You can modify its design by changing the styles and content.
  </div>
  <div class="mdl-card__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
      Explore
    </button>
  </div>
</div>

এখানে:

• mdl-shadow--4dp: Shadow effect বাড়ানোর জন্য 4dp shadow ব্যবহার করা হয়েছে, যা আরও গভীরতা প্রদান করে।
• mdl-button--primary: বাটনের জন্য primary ক্লাস ব্যবহার করা হয়েছে, যা এটিকে আরও আকর্ষণীয় করে তোলে।

সারাংশ

MDL এর Media Card একটি খুবই কার্যকরী কম্পোনেন্ট যা মিডিয়া কন্টেন্ট (ইমেজ, ভিডিও, অডিও) প্রদর্শন করতে ব্যবহৃত হয়। এটি গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি, এবং সহজেই কাস্টমাইজ করা যায়। MDL এর Media Card ব্যবহার করে আপনি সুন্দর, রেসপন্সিভ এবং ইন্টারঅ্যাক্টিভ মিডিয়া কন্টেন্ট প্রদর্শন করতে পারবেন, যা ওয়েবসাইটের ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও সমৃদ্ধ করবে।

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 এর অংশবিশেষ

1. mdl-card: এটি মূল Card কম্পোনেন্টের ক্লাস।
2. mdl-card__title: এই ক্লাসটি কার্ডের টাইটেল সেকশনটির জন্য ব্যবহৃত হয়।
3. mdl-card__supporting-text: এটি কার্ডের প্রধান টেক্সট কন্টেন্টের জন্য ব্যবহৃত হয়।
4. 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 কম্পোনেন্ট ব্যবহার করে, আপনি আপনার ওয়েবসাইটের ডিজাইনকে আরও উন্নত এবং ইউজার-ফ্রেন্ডলি করতে পারবেন।

Material Design Lite (MDL) এর একটি গুরুত্বপূর্ণ উপাদান হল Media Cards বা মিডিয়া কার্ড, যা কনটেন্ট এবং মিডিয়া উপাদানগুলোকে সুন্দরভাবে একত্রে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি একটি পরিষ্কার এবং কাঠামোগত ডিজাইন প্রদান করে, যেখানে মিডিয়া (ছবি, ভিডিও, আইকন) এবং কনটেন্ট (টেক্সট, লিঙ্ক, টাইটেল) সুন্দরভাবে একত্রিত করা যায়। MDL এ Containers ব্যবহার করে আপনি এই মিডিয়া কার্ডগুলোকে আরও সুন্দরভাবে সাজাতে পারেন।

এই টিউটোরিয়ালে, আমরা দেখব কীভাবে কনটেন্ট, মিডিয়া, এবং অ্যাকশন যোগ করে একটি সুন্দর Media Card তৈরি করা যায়।

মিডিয়া কার্ড (Media Card) তৈরি করা

MDL এ মিডিয়া কার্ড সাধারণত mdl-card ক্লাস দিয়ে তৈরি করা হয়, যা টেক্সট, ছবি, এবং অ্যাকশন (যেমন বাটন) একত্রে উপস্থাপন করে। একটি মিডিয়া কার্ডের ভিতরে সাধারণত চারটি প্রধান অংশ থাকে:

1. মিডিয়া অংশ (Media): সাধারণত ছবি বা ভিডিও।
2. টাইটেল এবং কনটেন্ট: টেক্সট, শিরোনাম বা বিস্তারিত কনটেন্ট।
3. অ্যাকশন অংশ (Action): এক বা একাধিক বাটন বা লিঙ্ক।

১. মিডিয়া কার্ডের কাঠামো

<div class="mdl-card mdl-shadow--2dp">
  <!-- মিডিয়া অংশ -->
  <div class="mdl-card__media">
    <img src="https://via.placeholder.com/400x200" alt="Image" class="mdl-card__media-content">
  </div>
  
  <!-- টাইটেল এবং কনটেন্ট -->
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Card Title</h2>
  </div>
  
  <div class="mdl-card__supporting-text">
    This is some example text. Here you can add more content like paragraphs, lists, or links.
  </div>
  
  <!-- অ্যাকশন -->
  <div class="mdl-card__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      Action Button
    </button>
    <a href="#" class="mdl-button mdl-js-button mdl-button--flat">
      Link
    </a>
  </div>
</div>

বিস্তারিত ব্যাখ্যা:

1. mdl-card: এটি কার্ডের মূল কন্টেইনার ক্লাস। এটি কার্ডের স্টাইল এবং কাঠামো নিয়ন্ত্রণ করে।
2. mdl-card__media: মিডিয়া অংশ (ছবি বা ভিডিও) ধারণ করে। এটি মিডিয়া উপাদানকে একটি উপযুক্ত জায়গায় স্থাপন করে।
3. mdl-card__title: কার্ডের শিরোনাম বা টাইটেল স্থাপন করে।
4. mdl-card__supporting-text: কার্ডের মূল কনটেন্ট বা বিস্তারিত টেক্সট যোগ করতে ব্যবহৃত হয়।
5. mdl-card__actions: এই অংশটি বাটন, লিঙ্ক বা অন্যান্য অ্যাকশন উপাদান ধারণ করে। এখানে ব্যবহারকারী ক্লিক করার জন্য একটি অ্যাকশন বাটন বা লিঙ্ক থাকতে পারে।

কনটেন্ট, মিডিয়া, এবং অ্যাকশনসমূহের কাস্টমাইজেশন

MDL এর মিডিয়া কার্ড কাস্টমাইজ করার জন্য বিভিন্ন স্টাইল এবং ক্লাস ব্যবহার করা যায়। এখানে কিছু কাস্টমাইজেশনের উদাহরণ দেওয়া হলো:

১. মিডিয়া অংশের কাস্টমাইজেশন

যদি আপনি ছবি বা ভিডিও পরিবর্তন করতে চান, তাহলে mdl-card__media ক্লাসের ভিতরে আপনার মিডিয়া ফাইল যোগ করতে হবে। উদাহরণস্বরূপ:

<div class="mdl-card__media">
  <img src="https://via.placeholder.com/400x200" alt="Image" class="mdl-card__media-content">
</div>

এটি একটি প্রতিস্থাপিত ছবি দিয়ে মিডিয়া অংশটি তৈরি করবে। আপনি ভিডিওও যোগ করতে পারেন:

<div class="mdl-card__media">
  <video width="400" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

২. কনটেন্টের কাস্টমাইজেশন

mdl-card__supporting-text এর মধ্যে আপনি প্যারাগ্রাফ, লিস্ট, বা অন্যান্য টেক্সট উপাদান যোগ করতে পারেন। উদাহরণ:

<div class="mdl-card__supporting-text">
  <p>This is a paragraph of text that explains the content of the card.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

এটি আপনার মিডিয়া কার্ডে বিস্তারিত কনটেন্ট প্রদর্শন করবে।

৩. অ্যাকশন অংশের কাস্টমাইজেশন

অ্যাকশন অংশে বাটন বা লিঙ্ক যোগ করা যেতে পারে, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে সহজ করে তোলে। এখানে একটি raised button এবং একটি flat button ব্যবহার করা হয়েছে:

<div class="mdl-card__actions">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    Action Button
  </button>
  <a href="#" class="mdl-button mdl-js-button mdl-button--flat">
    Link
  </a>
</div>

এটি একটি উঁচু (raised) বাটন এবং একটি ফ্ল্যাট লিঙ্ক তৈরি করবে।

মিডিয়া কার্ডের কাস্টমাইজেশন ও উন্নয়ন

MDL মিডিয়া কার্ডটি আরও কাস্টমাইজ করার জন্য CSS ব্যবহার করতে পারেন, যেমন:

১. ব্যাকগ্রাউন্ড কালার পরিবর্তন

আপনি কার্ডের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে পারেন:

.mdl-card {
  background-color: #f5f5f5;
}

২. টেক্সট সাইজ কাস্টমাইজেশন

কনটেন্টের টেক্সট সাইজ কাস্টমাইজ করতে, CSS এর মাধ্যমে করতে পারেন:

.mdl-card__title-text {
  font-size: 24px;
  color: #333;
}

.mdl-card__supporting-text {
  font-size: 16px;
}

৩. কার্ডের শ্যাডো কাস্টমাইজেশন

কার্ডের শ্যাডো পরিবর্তন করতে:

.mdl-card {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

এটি কার্ডে আরও গভীরতা এবং আধুনিক আউটলুক দেবে।

সারাংশ

Material Design Lite (MDL) ব্যবহার করে মিডিয়া কার্ড তৈরি করা সহজ এবং কার্যকরী। আপনি মিডিয়া, কনটেন্ট, এবং অ্যাকশন অংশগুলি যোগ করে একটি পূর্ণাঙ্গ এবং সুন্দর মিডিয়া কার্ড তৈরি করতে পারেন। MDL এর কার্ড কম্পোনেন্টগুলো কাস্টমাইজ করা যায় এবং ওয়েব ডিজাইনকে আরও আকর্ষণীয় ও ব্যবহারকারী-বান্ধব করে তোলে। CSS ব্যবহার করে আপনি এই কার্ডের ডিজাইন এবং কার্যকারিতা আরও উন্নত করতে পারেন।

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 এর গ্রিড সিস্টেম এবং বিভিন্ন স্টাইল ক্লাস ব্যবহার করে আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী কার্ড লেআউট তৈরি করতে পারবেন।