MDC-101 ওয়েব: ম্যাটেরিয়াল কম্পোনেন্টস (MDC) বেসিক (ওয়েব)

1. ভূমিকা

লোগো_কম্পোনেন্ট_রঙ_২x_ওয়েব_৯৬ডিপি.পিএনজি

ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ।

ওয়েবের জন্য মেটেরিয়াল ডিজাইন এবং মেটেরিয়াল কম্পোনেন্টগুলি কী কী?

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

ডেস্কটপ এবং মোবাইল ওয়েবের জন্য, ম্যাটেরিয়াল কম্পোনেন্টস ওয়েব (MDC ওয়েব) অ্যাপ এবং ওয়েবসাইট জুড়ে ধারাবাহিকতা তৈরির জন্য ডিজাইন এবং ইঞ্জিনিয়ারিংকে উপাদানগুলির একটি লাইব্রেরির সাথে একত্রিত করে। MDC ওয়েব উপাদানগুলি প্রতিটি তাদের নিজস্ব নোড মডিউলে থাকে, তাই ম্যাটেরিয়াল ডিজাইন সিস্টেম বিকশিত হওয়ার সাথে সাথে, এই উপাদানগুলি সহজেই আপডেট করা যেতে পারে যাতে সামঞ্জস্যপূর্ণ পিক্সেল-নিখুঁত বাস্তবায়ন এবং Google এর ফ্রন্ট-এন্ড ডেভেলপমেন্ট মানগুলির সাথে সঙ্গতি নিশ্চিত করা যায়। MDC অ্যান্ড্রয়েড , iOS এবং Flutter এর জন্যও উপলব্ধ।

এই কোডল্যাবে, আপনি MDC ওয়েবের বেশ কয়েকটি উপাদান ব্যবহার করে একটি লগইন পৃষ্ঠা তৈরি করবেন।

তুমি কী তৈরি করবে

এই কোডল্যাবটি তিনটি কোডল্যাবের মধ্যে প্রথম যা আপনাকে Shrine নামে একটি অ্যাপ তৈরিতে সহায়তা করবে, যা একটি ই-কমার্স ওয়েবসাইট যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এটি প্রদর্শন করবে যে MDC ওয়েব ব্যবহার করে আপনি কীভাবে যেকোনো ব্র্যান্ড বা স্টাইল প্রতিফলিত করার জন্য উপাদানগুলিকে কাস্টমাইজ করতে পারেন।

এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পৃষ্ঠা তৈরি করবেন যাতে থাকবে:

  • দুটি টেক্সট ফিল্ড, একটি ব্যবহারকারীর নাম লেখার জন্য এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য
  • দুটি বোতাম, একটি "বাতিল করুন" এর জন্য এবং একটি "পরবর্তী" এর জন্য
  • ওয়েবসাইটের নাম (শ্রাইন)
  • মন্দিরের লোগোর একটি ছবি

674d1ca8cfa98c9.png সম্পর্কে

এই কোডল্যাবে MDC ওয়েব উপাদানগুলি

  • টেক্সট ফিল্ড
  • বোতাম
  • লহরী

তোমার যা লাগবে

  • Node.js এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজারের সাথে আসে)।
  • নমুনা কোড (পরবর্তী ধাপে ডাউনলোড করা হবে)
  • HTML, CSS এবং JavaScript এর প্রাথমিক জ্ঞান

আমরা সবসময় আমাদের টিউটোরিয়ালগুলিকে উন্নত করার চেষ্টা করি। ওয়েব ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

নবীন মধ্যবর্তী দক্ষ

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন

স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-101/starter ডিরেক্টরির মধ্যে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।

...অথবা GitHub থেকে ক্লোন করুন

GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

প্রকল্প নির্ভরতা ইনস্টল করুন

স্টার্টার ডিরেক্টরি থেকে, চালান:

npm install

আপনি অনেক কার্যকলাপ দেখতে পাবেন এবং শেষে, আপনার টার্মিনালটি একটি সফল ইনস্টলেশন দেখাবে:

204c063d8fd78f94.png সম্পর্কে

যদি তা না হয়, তাহলে npm audit fix চালান।

স্টার্টার অ্যাপটি চালান

একই ডিরেক্টরিতে, চালান:

npm start

webpack-dev-server শুরু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারটি http://localhost:8080/ এ নির্দেশ করুন।

17c139dc5a9bebaf.png সম্পর্কে

সফল! শ্রাইনের লগইন পৃষ্ঠার স্টার্টার কোডটি আপনার ব্রাউজারে চলমান থাকা উচিত। আপনি "শ্রাইন" নামটি এবং তার ঠিক নীচে শ্রাইন লোগোটি দেখতে পাবেন।

f7e3f354df8d84b8.png সম্পর্কে

কোডটি একবার দেখে নাও।

index.html এ মেটাডেটা

স্টার্টার ডিরেক্টরিতে, আপনার পছন্দের কোড এডিটর দিয়ে index.html খুলুন। এতে এটি থাকা উচিত:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

এখানে, ওয়েবপ্যাক দ্বারা তৈরি bundle-login.css ফাইলটি লোড করার জন্য একটি <link> ট্যাগ ব্যবহার করা হয়েছে এবং একটি <script> ট্যাগে bundle-login.js ফাইল অন্তর্ভুক্ত রয়েছে। এছাড়াও, আমরা ধারাবাহিক ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য normalize.css , সেইসাথে Google Fonts থেকে Roboto ফন্ট অন্তর্ভুক্ত করি।

login.scss এ কাস্টম স্টাইল

MDC ওয়েব কম্পোনেন্টগুলিকে mdc-* CSS ক্লাস ব্যবহার করে স্টাইল করা হয়, যেমন mdc-text-field ক্লাস। (MDC ওয়েব তার DOM স্ট্রাকচারকে তার পাবলিক API-এর অংশ হিসেবে বিবেচনা করে।)

সাধারণভাবে, আপনার নিজস্ব ক্লাস ব্যবহার করে উপাদানগুলিতে কাস্টম স্টাইল পরিবর্তন করার পরামর্শ দেওয়া হয়। আপনি উপরের HTML-এ কিছু কাস্টম CSS ক্লাস লক্ষ্য করেছেন, যেমন shrine-logo । পৃষ্ঠায় মৌলিক স্টাইল যোগ করার জন্য এই স্টাইলগুলি login.scss এ সংজ্ঞায়িত করা হয়েছে।

login.scss খুলুন এবং লগইন পৃষ্ঠার জন্য আপনি নিম্নলিখিত স্টাইলগুলি দেখতে পাবেন:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

এখন যেহেতু আপনি স্টার্টার কোডের সাথে পরিচিত, আসুন আমাদের প্রথম উপাদানটি বাস্তবায়ন করি।

৩. টেক্সট ফিল্ড যোগ করুন

শুরু করার জন্য, আমরা আমাদের লগইন পৃষ্ঠায় দুটি টেক্সট ফিল্ড যুক্ত করব, যেখানে লোকেরা তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ড লিখতে সক্ষম হবে। আমরা MDC টেক্সট ফিল্ড উপাদানটি ব্যবহার করব, যার মধ্যে অন্তর্নির্মিত কার্যকারিতা রয়েছে যা একটি ভাসমান লেবেল প্রদর্শন করে এবং একটি স্পর্শ রিপল সক্রিয় করে।

9ad8a7db0b50f07d.png সম্পর্কে

MDC টেক্সট ফিল্ড ইনস্টল করুন

MDC ওয়েব কম্পোনেন্টগুলি NPM প্যাকেজের মাধ্যমে প্রকাশিত হয়। টেক্সট ফিল্ড কম্পোনেন্টের জন্য প্যাকেজ ইনস্টল করতে, চালান:

npm install @material/textfield@^6.0.0

HTML যোগ করুন

index.html এ, <form> এলিমেন্টের ভিতরে নিম্নলিখিতটি যোগ করুন:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDC টেক্সট ফিল্ড DOM কাঠামোটি বেশ কয়েকটি অংশ নিয়ে গঠিত:

  • প্রধান উপাদান, mdc-text-field
  • উপ-উপাদানগুলি mdc-text-field__ripple, mdc-text-field__input , mdc-floating-label , এবং mdc-line-ripple

সিএসএস যোগ করুন

login.scss এ, বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

@import "@material/textfield/mdc-text-field";

একই ফাইলে, টেক্সট ফিল্ডগুলিকে সারিবদ্ধ এবং কেন্দ্রীভূত করতে নিম্নলিখিত স্টাইলগুলি যোগ করুন:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

জাভাস্ক্রিপ্ট যোগ করুন

login.js খুলুন, যা বর্তমানে খালি। টেক্সট ফিল্ডগুলি আমদানি এবং ইন্সট্যান্টিয়েট করতে নিম্নলিখিত কোডটি যোগ করুন: 

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

HTML5 যাচাইকরণ যোগ করুন

HTML5 এর ফর্ম ভ্যালিডেশন API দ্বারা প্রদত্ত বৈশিষ্ট্য ব্যবহার করে টেক্সট ফিল্ডগুলি ফিল্ড ইনপুটটি বৈধ কিনা বা কোনও ত্রুটি রয়েছে কিনা তা প্রকাশ করে।

তোমার উচিত:

  • Username এবং Password উভয় টেক্সট ফিল্ডের mdc-text-field__input এলিমেন্টে required অ্যাট্রিবিউট যোগ করুন।
  • পাসওয়ার্ড টেক্সট ফিল্ডের mdc-text-field__input এলিমেন্টের minlength অ্যাট্রিবিউট "8" তে সেট করুন।

দুটি <label class="mdc-text-field mdc-text-field--filled"> এলিমেন্টকে এভাবে সাজিয়ে নিন: 

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

http://localhost:8080/ এ পৃষ্ঠাটি রিফ্রেশ করুন। এখন আপনি ব্যবহারকারীর নাম এবং পাসওয়ার্ডের জন্য দুটি টেক্সট ফিল্ড সহ একটি পৃষ্ঠা দেখতে পাবেন!

ভাসমান লেবেল অ্যানিমেশন এবং লাইন রিপল অ্যানিমেশন (নীচের সীমানা রেখা যা বাইরের দিকে তরঙ্গায়িত হয়) দেখতে টেক্সট ফিল্ডগুলিতে ক্লিক করুন:

অনুসরণ

৪. বোতাম যোগ করুন

এরপর, আমরা আমাদের লগইন পৃষ্ঠায় দুটি বোতাম যুক্ত করব: "বাতিল করুন" এবং "পরবর্তী।" আইকনিক মেটেরিয়াল ডিজাইন ইঙ্ক রিপল ইফেক্টটি সম্পূর্ণ করতে আমরা MDC রিপল উপাদানের সাথে MDC বোতাম উপাদানটি ব্যবহার করব।

674d1ca8cfa98c9.png সম্পর্কে

MDC বোতাম ইনস্টল করুন

বোতাম কম্পোনেন্টের প্যাকেজ ইনস্টল করতে, চালান: 

npm install @material/button@^6.0.0

HTML যোগ করুন

index.html এ, <label class="mdc-text-field mdc-text-field--filled password"> এলিমেন্টের ক্লোজিং ট্যাগের নিচে নিম্নলিখিতটি যোগ করুন: 

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

"বাতিল করুন" বোতামের জন্য, আমরা ডিফল্ট বোতাম স্টাইল ব্যবহার করছি। তবে, "পরবর্তী" বোতামটি একটি উত্থিত স্টাইল ভেরিয়েন্ট ব্যবহার করে, যা mdc-button--raised ক্লাস দ্বারা নির্দেশিত।

পরবর্তীতে সহজে সারিবদ্ধ করার জন্য, আমরা দুটি mdc-button উপাদানকে একটি <div> উপাদানের মধ্যে মুড়ে ফেলি।

সিএসএস যোগ করুন

login.scss এ, বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন: 

@import "@material/button/mdc-button";

বোতামগুলো সারিবদ্ধ করতে এবং তাদের চারপাশে একটি মার্জিন যোগ করতে, login.scss এ নিম্নলিখিত স্টাইলগুলি যোগ করুন: 

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

বোতামগুলিতে একটি কালির লহর যোগ করুন

যখন ব্যবহারকারী কোনও বোতাম স্পর্শ করে বা ক্লিক করে, তখন এটি একটি কালি রিপলের আকারে প্রতিক্রিয়া প্রদর্শন করবে। কালি রিপল উপাদানটির জন্য জাভাস্ক্রিপ্ট প্রয়োজন, তাই আমরা এটি পৃষ্ঠায় যুক্ত করব।

রিপল কম্পোনেন্টের প্যাকেজ ইনস্টল করতে, চালান: 

npm install @material/ripple@^6.0.0

login.js এর উপরে, নিম্নলিখিত আমদানি বিবৃতিটি যোগ করুন: 

import {MDCRipple} from '@material/ripple';

তরঙ্গগুলিকে তাৎক্ষণিকভাবে ফুটিয়ে তুলতে, login.js এ নিম্নলিখিতটি যোগ করুন: 

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

যেহেতু আমাদের রিপল ইনস্ট্যান্সের রেফারেন্স ধরে রাখার প্রয়োজন নেই, তাই এটিকে কোনও ভেরিয়েবলের সাথে অ্যাসাইন করার প্রয়োজন নেই।

এই তো! পৃষ্ঠাটি রিফ্রেশ করুন। প্রতিটি বোতামে ক্লিক করলে একটি কালির লহর দেখা যাবে।

অনুসরণ

টেক্সট ফিল্ডগুলিতে বৈধ মান পূরণ করুন এবং "পরবর্তী" বোতাম টিপুন। আপনি এটি করেছেন! আপনি MDC-102-তে এই পৃষ্ঠায় কাজ চালিয়ে যাবেন।

৫. সংক্ষিপ্তসার

বেসিক HTML মার্কআপ এবং CSS এবং জাভাস্ক্রিপ্টের মাত্র কয়েকটি লাইন ব্যবহার করে, ওয়েব লাইব্রেরির জন্য Material Components আপনাকে একটি সুন্দর লগইন পৃষ্ঠা তৈরি করতে সাহায্য করেছে যা Material Design নির্দেশিকা মেনে চলে এবং সমস্ত ডিভাইসে ধারাবাহিকভাবে দেখায় এবং আচরণ করে।

পরবর্তী পদক্ষেপ

MDC ওয়েব লাইব্রেরিতে টেক্সট ফিল্ড, বাটন এবং রিপল তিনটি মূল উপাদান, তবে আরও অনেক উপাদান রয়েছে! আপনি MDC ওয়েবে বাকি উপাদানগুলিও অন্বেষণ করতে পারেন।

নেভিগেশন ড্রয়ার এবং ছবির তালিকা সম্পর্কে জানতে আপনি MDC-102: মেটেরিয়াল ডিজাইন স্ট্রাকচার এবং লেআউট পড়তে পারেন। মেটেরিয়াল কম্পোনেন্টস ব্যবহার করে দেখার জন্য ধন্যবাদ। আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!

আমি যথেষ্ট সময় এবং প্রচেষ্টার মাধ্যমে এই কোডল্যাবটি সম্পূর্ণ করতে সক্ষম হয়েছি।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে একমত নই

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্ট ব্যবহার চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে একমত নই