MDC-111 ওয়েব: আপনার কোডবেসের (ওয়েব) মধ্যে উপাদান উপাদান অন্তর্ভুক্ত করা

1. ভূমিকা

logo_components_color_2x_web_96dp.png

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

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

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

এই কোডল্যাবে, আপনি কিছু বিদ্যমান উপাদানকে একটি ফর্মে প্রতিস্থাপন করবেন যা MDC ওয়েব দ্বারা সরবরাহ করা হয়েছে:

c33f9d1388feca74.png

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

  • বোতাম
  • নির্বাচন করুন
  • পাঠ্য ক্ষেত্র

আপনি কি প্রয়োজন হবে

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

ওয়েব ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

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

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

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

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

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

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

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

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

স্টার্টার ডিরেক্টরি থেকে ( material-components-web-codelabs/mdc-111/starter ), চালান:

npm install

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

bb3a822c020c9287.png

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

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

npm start

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

aa9263b15ae4f8d8.png

সফলতার ! আপনি অ্যাপের শিপিং ঠিকানা ফর্ম দেখতে হবে:

8f60906e660b695e.png

3. বোতামটি আপডেট করুন

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

ডেভেলপমেন্ট সার্ভার মেরে ফেলতে Ctrl + C টিপুন। তারপর, এমডিসি বোতাম এনপিএম প্যাকেজটি ইনস্টল করুন এবং সার্ভারটি পুনরায় চালু করুন: 

npm install @material/button
npm start

CSS আমদানি করুন

_theme.scss এর শীর্ষে, .crane-button { ... } ব্লকটি মুছুন এবং তার জায়গায় নিম্নলিখিত যোগ করুন: 

$mdc-theme-primary: $crane-primary-color;

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

মার্কআপ আপডেট করুন

index.html এ, <button> উপাদান থেকে crane-button শ্রেণীটি সরিয়ে দিন, mdc-button এবং mdc-button--raised ক্লাস যোগ করুন, এবং mdc-button__label ক্লাসের সাথে একটি <span> উপাদানের মধ্যে লেবেলটি নেস্ট করুন: 

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

লহর যোগ করুন

MDC বাটন জাভাস্ক্রিপ্ট ছাড়া ব্যবহার করা যেতে পারে. যাইহোক, বোতামটিতে একটি ইন্টারেক্টিভ রিপল যোগ করা একটি সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।

ডেভেলপমেন্ট সার্ভার মেরে ফেলতে Ctrl + C টিপুন। তারপর চালান:

npm install @material/ripple
npm start

app.js এর শীর্ষে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

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

বোতামে ঢেউ তাত্ক্ষণিক করতে, app.js এর নীচে নিম্নলিখিত যোগ করুন: 

new MDCRipple(document.querySelector('.mdc-button'));

রোবোটো ফন্ট আমদানি করুন

ডিফল্টরূপে, উপাদান ডিজাইন উপাদান টাইপফেসের জন্য রোবোটো ব্যবহার করে।

index.html এ, <head> উপাদানে নিম্নলিখিত যোগ করে Roboto ওয়েব ফন্ট আমদানি করুন:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

পৃষ্ঠাটি পুনরায় লোড করুন এবং আপনার এরকম কিছু দেখতে হবে:

9be8eb813b02eada.gif

বোতামটি এখন চাপলে চাক্ষুষ প্রতিক্রিয়া হিসাবে সূক্ষ্ম লহরী প্রভাব প্রদর্শন করে।

4. নির্বাচনী উপাদান আপডেট করুন

MDC সিলেক্ট কম্পোনেন্ট একটি নেটিভ HTML <select> এলিমেন্টকে মোড়ক করে। যেখানে আপনি সাধারণত একটি <select> ব্যবহার করবেন সেখানে এটি ব্যবহার করুন। আসুন "রাষ্ট্র" ক্ষেত্রটি আপডেট করি।

এমডিসি নোড মডিউল ইনস্টল করুন

ডেভেলপমেন্ট সার্ভার মেরে ফেলতে Ctrl + C টিপুন। তারপর চালান: 

npm install @material/select
npm start

CSS আমদানি করুন

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

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

মার্কআপ আপডেট করুন

index.html এ <select> উপাদানটি সনাক্ত করুন। mdc-select__native-control দিয়ে crane-input ক্লাস প্রতিস্থাপন করুন:

<select class="mdc-select__native-control" id="crane-state-input" required>

<select> ট্যাগের ঠিক উপরে, MDC সিলেক্ট কম্পোনেন্টের ড্রপ-ডাউন তীরটির জন্য নিম্নলিখিত মার্কআপ যোগ করুন:

<i class="mdc-select__dropdown-icon"></i>

ক্লোজিং </select> ট্যাগের ঠিক নিচে, mdc-floating-label দিয়ে crane-label ক্লাস প্রতিস্থাপন করুন:

<label class="mdc-floating-label" for="crane-state-input">

তারপরে লেবেলের পরে অবিলম্বে নিম্নলিখিত মার্কআপ যোগ করুন:

<div class="mdc-line-ripple"></div>

অবশেষে, <select> উপাদানের চারপাশে নিম্নলিখিত ট্যাগ যোগ করুন (কিন্তু crane-field উপাদানের ভিতরে):

<div class="mdc-select">
  ...
</div>

ফলস্বরূপ মার্কআপটি এইরকম হওয়া উচিত: 

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

JS আমদানি করুন

app.js এর শীর্ষে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

import {MDCSelect} from '@material/select';

নির্বাচনকে ইনস্ট্যান্টিয়েট করতে, app.js এর নীচে নিম্নলিখিত যোগ করুন:

new MDCSelect(document.querySelector('.mdc-select'));

পৃষ্ঠাটি পুনরায় লোড করুন, যা এখন এইরকম হওয়া উচিত:

20fa4104564f8195.gif

MDC সিলেক্ট কম্পোনেন্ট ব্যবহারকারীর জন্য একটি পরিচিত বিন্যাসে বিকল্পগুলির একটি তালিকা উপস্থাপন করে, কিন্তু আধুনিক স্টাইলিং সহ।

5. পাঠ্য ক্ষেত্র আপডেট করুন

মেটেরিয়াল ডিজাইন টেক্সট ফিল্ডে প্লেইন <input> এলিমেন্টের তুলনায় বড় ব্যবহারযোগ্যতা লাভ করেছে। এগুলিকে জটিল বিষয়বস্তুর মধ্যে সনাক্ত করা সহজ করার জন্য ডিজাইন করা হয়েছে এবং ব্যবহারকারী যখন তাদের সাথে ইন্টারঅ্যাক্ট করে তখন সূক্ষ্ম ভিজ্যুয়াল প্রতিক্রিয়া প্রদর্শন করে৷

এমডিসি নোড মডিউল ইনস্টল করুন

ডেভেলপমেন্ট সার্ভার মেরে ফেলতে Ctrl + C টিপুন। তারপর চালান: 

npm install @material/textfield
npm start

CSS যোগ করুন

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

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

মার্কআপ আপডেট করুন

index.html এ, "নাম" ক্ষেত্রের জন্য <input> উপাদানটি সনাক্ত করুন। mdc-text-field__input দিয়ে crane-input ক্লাস প্রতিস্থাপন করুন:

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

এরপরে, mdc-floating-label দিয়ে crane-label ক্লাস প্রতিস্থাপন করুন:

<label class="mdc-floating-label" for="crane-name-input">

তারপরে লেবেলের পরে অবিলম্বে নিম্নলিখিত মার্কআপ যোগ করুন:

<div class="mdc-line-ripple"></div>

অবশেষে, নিম্নলিখিতগুলির সাথে সমস্ত 3টি উপাদান মোড়ানো:

<div class="mdc-text-field">
  ...
</div>

ফলস্বরূপ মার্কআপটি এইরকম হওয়া উচিত:

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

পৃষ্ঠার অন্যান্য সমস্ত <input> উপাদানগুলির জন্য একই পদ্ধতি পুনরাবৃত্তি করুন।

" ঠিকানা" , " শহর" এবং " জিপ কোড" ক্ষেত্রগুলির জন্য মার্কআপটি এইরকম হওয়া উচিত: 

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

আপনি এখন _theme.scss থেকে .crane-label এবং .crane-input শৈলীগুলি সরাতে পারেন, যা আর ব্যবহার করা হয় না৷

JS আমদানি করুন

app.js এর শীর্ষে নিম্নলিখিত আমদানি বিবৃতি যোগ করুন:

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

টেক্সট ক্ষেত্রগুলিকে ইনস্ট্যান্টিয়েট করতে, app.js এর নীচে নিম্নলিখিত যোগ করুন:

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

পৃষ্ঠাটি পুনরায় লোড করুন, যা এখন এইরকম হওয়া উচিত:

c33f9d1388feca74.png

মেটেরিয়াল থিমিং ব্যবহার করার জন্য পাঠ্য ক্ষেত্রগুলি এখন আপডেট করা হয়েছে।

6. রিক্যাপ

আপনি আপনার অ্যাপের সম্পূর্ণ রিডিজাইন না করেই কিছু সাধারণ উপাদান (টেক্সট ফিল্ড, সিলেক্ট এবং বোতাম) প্রতিস্থাপন করেছেন। দারুণ কাজ!

অন্যান্য উপাদান যা একটি বড় পার্থক্য করতে পারে তার মধ্যে রয়েছে শীর্ষ অ্যাপ বার এবং নেভিগেশন ড্রয়ার।

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

আপনি MDC ওয়েব ক্যাটালগ পরিদর্শন করে MDC ওয়েবে আরও বেশি উপাদান অন্বেষণ করতে পারেন৷

আপনি যদি একটি নির্দিষ্ট ফ্রেমওয়ার্কের সাথে MDC ওয়েব ব্যবহার করতে আগ্রহী হন, তাহলে MDC-112-এ যান: ওয়েব ফ্রেমওয়ার্কের সাথে MDC একীভূত করা ।

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

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

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

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