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

1. ভূমিকা

logo_components_color_2x_web_96dp.png

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

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

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

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

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

আপনি কি নির্মাণ করবেন

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

এই কোডল্যাবে, আপনি মন্দিরের জন্য একটি লগইন পৃষ্ঠা তৈরি করবেন যাতে রয়েছে:

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

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>

এখানে, একটি <link> ট্যাগ ব্যবহার করা হয় bundle-login.css ফাইলটি লোড করার জন্য যা ওয়েবপ্যাক দ্বারা তৈরি করা হয়েছে, এবং একটি <script> ট্যাগে bundle-login.js ফাইল অন্তর্ভুক্ত রয়েছে। উপরন্তু, আমরা সামঞ্জস্যপূর্ণ ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য normalize.css , সেইসাথে Google ফন্ট থেকে 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;
}

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

3. পাঠ্য ক্ষেত্র যোগ করুন

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

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

CSS যোগ করুন

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 বৈধতা যোগ করুন

এইচটিএমএল 5 এর ফর্ম যাচাইকরণ API দ্বারা প্রদত্ত বৈশিষ্ট্যগুলি ব্যবহার করে যদি ফিল্ড ইনপুটটি বৈধ হয় বা এতে একটি ত্রুটি থাকে তবে পাঠ্য ক্ষেত্রগুলি প্রকাশ করে৷

আপনার উচিত:

  • ইউজারনেম এবং পাসওয়ার্ড টেক্সট ফিল্ড উভয়ের 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/- এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার এখন ব্যবহারকারীর নাম এবং পাসওয়ার্ডের জন্য দুটি পাঠ্য ক্ষেত্র সহ একটি পৃষ্ঠা দেখতে হবে!

ফ্লোটিং লেবেল অ্যানিমেশন এবং লাইন রিপল অ্যানিমেশন (নীচের সীমানা রেখা যা বাইরের দিকে ঢেউ খেলে) পরীক্ষা করতে পাঠ্য ক্ষেত্রে ক্লিক করুন:

c0b341e9949a6183.gif

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

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

674d1ca8cfa98c9.png

এমডিসি বোতাম ইনস্টল করুন

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

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> উপাদানে মোড়ানো।

CSS যোগ করুন

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'));

কারণ আমাদের রিপল ইনস্ট্যান্সের একটি রেফারেন্স ধরে রাখার দরকার নেই, এটি একটি ভেরিয়েবলে বরাদ্দ করার দরকার নেই।

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

bb19b0a567977bde.gif

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

5. রিক্যাপ

বেসিক HTML মার্কআপ এবং CSS এবং JavaScript-এর মাত্র কয়েকটি লাইন ব্যবহার করে, ওয়েব লাইব্রেরির জন্য উপাদান উপাদানগুলি আপনাকে একটি সুন্দর লগইন পৃষ্ঠা তৈরি করতে সাহায্য করেছে যা মেটেরিয়াল ডিজাইন নির্দেশিকাগুলির সাথে সামঞ্জস্যপূর্ণ, এবং সমস্ত ডিভাইসে ধারাবাহিকভাবে দেখায় এবং আচরণ করে৷

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

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

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

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

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

আমি ভবিষ্যতে উপাদান উপাদান ব্যবহার চালিয়ে যেতে চাই

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