MDC-102 ওয়েব: উপাদানের কাঠামো এবং বিন্যাস (ওয়েব)

1. ভূমিকা

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

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

কোডল্যাব MDC-101-এ, আপনি লগইন পৃষ্ঠার UI তৈরি করতে দুটি ম্যাটেরিয়াল কম্পোনেন্ট (MDC) ব্যবহার করেছেন: টেক্সট ফিল্ড এবং বোতাম। এখন আসুন নেভিগেশন, কাঠামো এবং ডেটা যোগ করে এটিকে আরও বিস্তৃত করি।

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

এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম পেজ তৈরি করবেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এতে থাকবে:

  • একটি নেভিগেশন ড্রয়ার
  • পণ্যের পূর্ণ একটি ছবির তালিকা

e2f359c254988d75.png সম্পর্কে

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

  • ড্রয়ার
  • ছবির তালিকা

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

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

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

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

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

MDC-101 থেকে চালিয়ে যাচ্ছেন?

যদি আপনি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপ 3 এ যান: একটি নেভিগেশন ড্রয়ার যোগ করুন।

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

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

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

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

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

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

আপনার বর্তমান ডিরেক্টরিটি material-components-web-codelabs/mdc-102/starter. সেখান থেকে, নিম্নলিখিত কমান্ডটি চালান:

npm install

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

23003b0e5fdf9077.png সম্পর্কে

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

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

npm start

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

4e04758051693865.png সম্পর্কে

সফল! আপনার MDC-101 কোডল্যাব থেকে শ্রাইন লগইন পৃষ্ঠাটি দেখা উচিত।

6c206785707bee2e.png সম্পর্কে

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

৩. একটি নেভিগেশন ড্রয়ার যোগ করুন

যখন ব্যবহারকারী সাইন ইন করেন, তখন একটি হোমপেজ প্রকাশিত হয় যেখানে লেখা থাকে, "তুমি এটা করেছো!" এটা দারুন! কিন্তু এখন আমাদের ব্যবহারকারীর পদক্ষেপ নিতে হবে এবং অ্যাপে তারা কোথায় আছে তার ধারণা পেতে হবে। এটিতে সাহায্য করার জন্য, নেভিগেশন যোগ করা যাক।

ম্যাটেরিয়াল ডিজাইনের নেভিগেশন প্যাটার্নগুলি উচ্চ মাত্রার ব্যবহারযোগ্যতা প্রদান করে। ম্যাটেরিয়াল নেভিগেশন ড্রয়ারটি নেভিগেশন এবং অন্যান্য ক্রিয়াগুলিতে দ্রুত অ্যাক্সেস প্রদান করে। আসুন একটি যোগ করি।

MDC ড্রয়ার এবং তালিকা ইনস্টল করুন

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

npm install @material/drawer @material/list

HTML যোগ করুন

home.html এ, ড্রয়ার এবং এর আইটেমগুলির জন্য নিম্নলিখিত মার্কআপ দিয়ে "You did it!" প্রতিস্থাপন করুন:

<aside class="mdc-drawer shrine-drawer">
  <div class="mdc-drawer__header">
    <svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
      <g>
        <g>
          <path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
             M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
        </g>
        <rect fill="none" width="24" height="24"/>
      </g>
    </svg>
    <h1 class="shrine-title">SHRINE</h1>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
        <span class="mdc-list-item__text">Featured</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Apartment</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Accessories</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Shoes</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Tops</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Bottoms</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Dresses</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">My Account</span>
      </a>
    </nav>
  </div>
</aside>

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

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

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

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

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

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

সঠিক কীবোর্ড নেভিগেশনের জন্য আমাদের নেভিগেশন ড্রয়ারের ভিতরে MDC তালিকাটি ইন্সট্যান্ট করতে হবে। home.js খুলুন, যা বর্তমানে খালি আছে, এবং নিম্নলিখিত কোডটি যোগ করুন:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

http://localhost:8080/home.html এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম পৃষ্ঠাটি এখন এইরকম দেখাবে:

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

এখন হোম পেজে একটি স্থায়ী নেভিগেশন ড্রয়ার রয়েছে যা বিভিন্ন নেভিগেশন আইটেম প্রদর্শন করে, প্রথম আইটেমটি সক্রিয় থাকা অবস্থায়।

৪. টেক্সট লেবেল সহ ছবি যোগ করুন

এখন যেহেতু আমাদের অ্যাপটির কিছু কাঠামো আছে, আসুন আমরা একটি ছবির তালিকায় রেখে বিষয়বস্তুটি সাজাই।

MDC ছবির তালিকা ইনস্টল করুন

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

npm install @material/image-list

একটি আইটেম সহ তালিকার জন্য HTML যোগ করুন

নেভিগেশন ড্রয়ারের পাশে একটি ছবির তালিকা যোগ করে শুরু করা যাক। আমরা তালিকাটি শুরু করব একটি একক আইটেম যোগ করে, যার মধ্যে একটি ছবি এবং একটি টেক্সট লেবেল থাকবে।

home.html এ, <aside> এলিমেন্টের শেষে নিম্নলিখিত HTML যোগ করুন: 

<ul class="mdc-image-list product-list">
  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>
</ul>

তালিকায় একটি অতিরিক্ত ক্লাস, product-list অন্তর্ভুক্ত রয়েছে, যা এই টিউটোরিয়ালে এবং MDC-103 উভয় ক্ষেত্রেই কাস্টম স্টাইল প্রয়োগ করবে।

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

প্রথমে, home.scss এ, বিদ্যমান আমদানির পরে চিত্র তালিকার উপাদান শৈলীর জন্য একটি আমদানি যোগ করুন: 

@import "@material/image-list/mdc-image-list";

এরপর, প্রাথমিক হোম পেজ স্টাইলের পরে নিম্নলিখিত স্টাইলগুলি যোগ করুন: 

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

এই স্টাইলগুলি ছবির তালিকাকে চারটি কলামে ছবি প্রদর্শনের নির্দেশ দেয়, যাতে নিশ্চিত করা যায় যে ছবির তালিকাটি ড্রয়ার থেকে স্বাধীনভাবে স্ক্রোল করে।

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

5362b330204ffd58.png সম্পর্কে

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

home.html এ, বিদ্যমান <li> উপাদানটি অনুলিপি করুন: 

  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>

তারপর বিদ্যমান আইটেমের পরে (ক্লোজিং </ul> ট্যাগের আগে) ১৫ বার পেস্ট করুন। এর ফলে মোট ১৬টি ছবি তৈরি হবে। অনন্য ছবি এবং শিরোনাম নিয়ে এখনও চিন্তা করবেন না; আপনি MDC-103-এ থাকা ছবিগুলি পেয়ে যাবেন।

রিফ্রেশ করুন। এখন হোম পেজটি এরকম দেখাবে:

e2f359c254988d75.png সম্পর্কে

ছবির তালিকা প্রতি সারিতে চারটি ছবি প্রদর্শন করে এবং ছবিগুলি স্বয়ংক্রিয়ভাবে উপলব্ধ স্ক্রিন স্থানের সাথে মানানসই আকার ধারণ করে।

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

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

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

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

যদিও এটি সম্পূর্ণরূপে কার্যকর, হোম পেজটি এখনও কোনও নির্দিষ্ট ব্র্যান্ড বা দৃষ্টিভঙ্গি প্রকাশ করে না। MDC-103: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদান ডিজাইন থিমিং -এ , আপনি একটি প্রাণবন্ত, আধুনিক ব্র্যান্ড প্রকাশ করার জন্য এই উপাদানগুলির স্টাইল কাস্টমাইজ করবেন।

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

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

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

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