MDC-103 ওয়েব: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদানের থিমিং (ওয়েব)

1. ভূমিকা

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

কোডল্যাব MDC-101 এবং MDC-102-এ, আপনি শ্রাইন নামক একটি অ্যাপের বেসিক তৈরি করতে ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ব্যবহার করেছেন, একটি ই-কমার্স অ্যাপ যা পোশাক এবং বাড়ির জিনিসপত্র বিক্রি করে। এই অ্যাপের ব্যবহারকারীর প্রবাহ একটি লগইন স্ক্রীন দিয়ে শুরু হয়, যা ব্যবহারকারীকে পণ্য সমন্বিত একটি হোম স্ক্রিনে নিয়ে যায়।

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

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

এই কোডল্যাবে, আপনি ব্যবহার করে এর ব্র্যান্ড প্রতিফলিত করতে শ্রাইনকে কাস্টমাইজ করবেন:

• রঙ
• টাইপোগ্রাফি
• উচ্চতা
• আকৃতি
• লেআউট

এটি 3টি কোডল্যাবের শেষ যা আপনাকে শ্রাইন নামক একটি অ্যাপ তৈরি করার মাধ্যমে গাইড করে।

সম্পর্কিত কোডল্যাবগুলি এখানে পাওয়া যাবে:

• MDC-101: ম্যাটেরিয়াল কম্পোনেন্টস (MDC) বেসিক
• MDC-102: মেটেরিয়াল ডিজাইন স্ট্রাকচার এবং লেআউট

এই কোডল্যাবে ব্যবহৃত MDC ওয়েব উপাদান এবং সাবসিস্টেম

• থিম
• টাইপোগ্রাফি
• উচ্চতা
• ছবির তালিকা

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

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

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

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

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

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

আপনি MDC-102 সম্পন্ন করলে, আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত হওয়া উচিত। ধাপ 3 এ যান: রঙ পরিবর্তন করুন ।

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

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

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

মূল ডিরেক্টরির নামে -master প্রত্যয়টি নোট করুন। আপনি যদি উপরের বোতাম থেকে স্টার্টার অ্যাপটি ডাউনলোড করেন, তাহলে এই কোডল্যাবের বাকি অংশের জন্য যখনই রুট ডিরেক্টরি উল্লেখ করা হয় তখন অনুগ্রহ করে -master প্রত্যয়টি যোগ করুন।

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

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

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

আরও সাহায্যের জন্য: GitHub থেকে একটি সংগ্রহস্থল ক্লোন করা

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

স্টার্টার ডিরেক্টরি থেকে material-components-web-codelabs/mdc-103/starter (আপনি যদি উপরের পদক্ষেপটি অনুসরণ করেন তবে এটি আপনার বর্তমান ডিরেক্টরি হওয়া উচিত), চালান:

npm install

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

MDC ওয়েব Sass নামে একটি CSS প্রিপ্রসেসর ব্যবহার করে। আপনি যদি একটি ভিন্ন CSS প্রিপ্রসেসর ব্যবহার করেন (বা কোনোটিই নয়), তাহলে ঠিক আছে! আপনি আপনার বিল্ড টুলচেইনে sass CLI ইনস্টল করে বা একটি প্লাগইন ব্যবহার করে আপনার বর্তমান প্রিপ্রসেসরের পাশাপাশি Sass ব্যবহার করতে পারেন (উদাহরণস্বরূপ, Webpack-এর জন্য sass-loader , Gulp-sass বা Grunt-এর জন্য grunt-sass )।

IE 11-এর মতো পুরানো ব্রাউজারগুলিতে আমাদের কোড কাজ করার জন্য, আমরা MDC ওয়েবের ES2015 জাভাস্ক্রিপ্ট সিনট্যাক্সকে ES5 জাভাস্ক্রিপ্ট সিনট্যাক্সে ট্রান্সপাইল করতে Babel নামক একটি ট্রান্সপাইলার ব্যবহার করি।

আমরা আমাদের ফাইল বান্ডিল করতে এবং স্থানীয়ভাবে আমাদের সাইট পরিবেশন করতে ওয়েবপ্যাক ব্যবহার করব৷ এই প্রকল্পের জন্য ওয়েবপ্যাক কনফিগারেশন ইতিমধ্যে webpack.config.js ফাইলে আপনার জন্য সেট আপ করা হয়েছে৷ এটি কীভাবে কনফিগার করা হয়েছিল সে সম্পর্কে আরও বিশদ বিবরণের জন্য, শুরু করার নির্দেশিকা দেখুন।

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

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

npm start

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

আপনি যদি npm install বা npm start না পারেন, তাহলে আপনার বিকাশকারী পরিবেশ বন্ধ করুন এবং সমস্যা সমাধান করুন।

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

ন্যাভিগেশন ড্রয়ারটি কার্যকর থাকাকালীন, এর রঙ, উচ্চতা এবং টাইপোগ্রাফি পরিবর্তন করে এটিকে শ্রাইন ব্র্যান্ডের সাথে মেলে।

3. রঙ পরিবর্তন করুন

এই রঙের থিমটি একজন ডিজাইনার দ্বারা কাস্টম রং দিয়ে তৈরি করা হয়েছে (নীচের ছবিতে দেখানো হয়েছে)। এটিতে শ্রাইনের ব্র্যান্ড থেকে বাছাই করা রং রয়েছে এবং মেটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা একটি পূর্ণাঙ্গ প্যালেট তৈরি করতে তাদের প্রসারিত করেছে। (এই রং 2014 উপাদান রঙ প্যালেট থেকে নয়.)

আসুন সেই রঙের স্কিমটি প্রতিফলিত করতে শ্রাইন অ্যাপের নেভিগেশন ড্রয়ারের রঙ পরিবর্তন করি।

থিমের রং ওভাররাইড করুন

_variables.scss নামে একটি নতুন ফাইল তৈরি করুন, যার মধ্যে নিম্নলিখিতগুলি রয়েছে:

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

তারপরে _common.scss এর একেবারে শীর্ষে এটি আমদানি করুন:

@import "./variables";

যে কোনো গ্লোবাল ভেরিয়েবল আপনি ওভাররাইড করতে চান (যেমন $mdc-theme-primary বা $mdc-theme-secondary ) আপনার *.scss ফাইলগুলিতে উপাদানের শৈলী আমদানি করার আগে অবশ্যই ঘোষণা করতে হবে। এই ক্ষেত্রে, _common.scss একটি আংশিক যা login.scss এবং home.scss এ অন্য কিছুর আগে আমদানি করা হয়, তাই এটি উভয় পৃষ্ঠার শৈলীতে প্রযোজ্য হবে।

নেভিগেশন ড্রয়ারে CSS স্টাইলিং যোগ করুন

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

@import "@material/ripple/mixins";

তারপর .shrine-drawer ক্লাস তৈরি করে নিম্নলিখিত শৈলী যোগ করুন:

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

আমরা @material/ripple/mixins আমদানি করেছি আমাদের mdc-states-activated mixin এর ব্যবহারকে সমর্থন করতে। এমডিসি রিপল প্যাকেজটি mdc-ripple এবং mdc-states মিক্সিন উভয়ই প্রদান করে, যেহেতু রিপল সরাসরি স্টেট সিস্টেমের সাথে সম্পর্কিত।

http://localhost:8080/home.html- এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম স্ক্রীন এখন এই মত হওয়া উচিত:

আমাদের রঙের স্কিমের সাথে মেলে লগইন স্ক্রিনের রঙ পরিবর্তন করা যাক।

লগইন পৃষ্ঠায় CSS স্টাইলিং যোগ করুন

login.scss এ, নিম্নলিখিত লাইন যোগ করুন:

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

এছাড়াও, .username, .password CSS সিলেক্টরের ভিতরে নিম্নলিখিত মিক্সিন আমন্ত্রণ যোগ করুন:

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

http://localhost:8080/- এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার লগইন স্ক্রীন এখন এই মত হওয়া উচিত:

4. টাইপোগ্রাফি এবং লেবেল শৈলী পরিবর্তন করুন

রঙ পরিবর্তন ছাড়াও, আপনার ডিজাইনার আপনাকে সাইটে ব্যবহার করার জন্য নির্দিষ্ট টাইপোগ্রাফিও দিয়েছেন। এর নেভিগেশন ড্রয়ারেও এটি যোগ করা যাক।

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

npm install @material/typography

টাইপোগ্রাফির জন্য CSS যোগ করুন

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

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

তারপর shrine-title ক্লাসে নিম্নলিখিত মিক্সিন আমন্ত্রণ যোগ করুন:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

টাইপোগ্রাফি হয় Sass মিক্সিন ব্যবহার করে সেট করা যেতে পারে, যেমনটি আমরা এখানে করেছি, অথবা আপনার উপাদানে নির্দিষ্ট ধরনের ক্লাস (যেমন class="mdc-typography--headline6" ) অন্তর্ভুক্ত করে।

এর পরে, ড্রয়ার আইটেম স্টাইল করা যাক.

একটি লাইন বিভাজক যোগ করুন

home.html এ, <a ...>Featured</a> উপাদানের পরপরই নিম্নলিখিতটি যোগ করুন:

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

home.scss এ নিম্নলিখিত শৈলী যোগ করুন:

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

ছবির আইটেম এবং লেবেল সামঞ্জস্য করুন

আইটেম এবং লেবেল সামঞ্জস্য করতে, .product-list নির্বাচকের মধ্যে home.scss এ নিম্নলিখিত শৈলী যোগ করুন:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম স্ক্রীন এখন এই মত হওয়া উচিত:

5. উচ্চতা সামঞ্জস্য করুন

এখন আপনি শ্রাইনের নির্দিষ্ট রঙ এবং টাইপোগ্রাফি দিয়ে পৃষ্ঠাটিকে স্টাইল করেছেন, আসুন শ্রাইনের পণ্যগুলি দেখানো চিত্র তালিকাটি দেখি। আসুন তাদের আরও জোর দিয়ে পণ্যগুলির প্রতি দৃষ্টি আকর্ষণ করি।

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

npm install @material/elevation

আমদানি বিবৃতি যোগ করুন

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

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

একটি নতুন ডিভ দিয়ে চিত্রের তালিকাটি মোড়ানো

home.html এ, <ul> উপাদানের চারপাশে নিম্নলিখিত মার্কআপ যোগ করুন:

<div class="shrine-body">
 <ul...>
</div>

Sass mixins ব্যবহার করে উচ্চতা পরিবর্তন করুন

home.scss এ, নিম্নলিখিত যোগ করুন:

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

একটি নির্বাচকের মধ্যে mdc-elevation Sass মিক্সিন ব্যবহার করে উচ্চতা প্রয়োগ করা হয় যে উপাদানগুলিকে আপনি উন্নত করতে চান।

চিত্তাকর্ষক ! আপনি চিত্র তালিকার আইটেমগুলির পিছনে সাদা পৃষ্ঠের বাম প্রান্তে একটি ছায়া যুক্ত করেছেন, যাতে এটি নেভিগেশনের কিছুটা উপরে ভাসতে দেখা যায়।

6. লেআউট পরিবর্তন করুন

এর পরে, বিভিন্ন আকৃতির অনুপাত এবং আকারে চিত্রগুলি দেখানোর জন্য লেআউট পরিবর্তন করা যাক, যাতে প্রতিটি চিত্র অন্যদের তুলনায় অনন্য দেখায়।

HTML পরিবর্তন করুন

home.html এ, mdc-image- mdc-image-list--masonry ক্লাস ধারণ করতে mdc-image-list উপাদান আপডেট করুন:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

ছবি যোগ করুন

home.html এ, assets ফোল্ডারে অবস্থিত চিত্রগুলির সাথে মেলে প্রতিটি img উপাদানের src বৈশিষ্ট্য পরিবর্তন করুন। তারপর, প্রতিটি ছবির জন্য লেবেল পাঠ্য আপডেট করুন। সম্পন্ন হলে, এটি এই মত হওয়া উচিত:

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </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>

CSS আপডেট করুন

home.scss এ, mdc-image-list-standard-columns(4) মিক্সিনটি সরিয়ে নিন এবং এটিকে নিম্নলিখিত মিক্সিন দিয়ে প্রতিস্থাপন করুন:

@include mdc-image-list-masonry-columns(4);

তারপর home.scss এ product-list ক্লাসে নিম্নলিখিত padding মান যোগ করুন:

.product-list {
  ...
  padding: 80px 100px 0;
}

আপনার কোডটি এখন complete/ ফোল্ডারে অন্তর্ভুক্ত কোডের সাথে মেলে।

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

7. অন্য থিম চেষ্টা করুন

রঙ আপনার ব্র্যান্ড প্রকাশ করার একটি শক্তিশালী উপায় এবং রঙের একটি ছোট পরিবর্তন আপনার ব্যবহারকারীর অভিজ্ঞতার উপর বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, ব্র্যান্ডের রঙের স্কিম সম্পূর্ণ ভিন্ন হলে শ্রাইন দেখতে কেমন হবে তা দেখা যাক।

CSS পরিবর্তন করুন

_variables.scss এ, আপনি প্রাথমিক থিমের জন্য ঘোষিত ভেরিয়েবলগুলিকে নিম্নলিখিতগুলির সাথে প্রতিস্থাপন করুন:

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

login.scss এ, .username, .password সিলেক্টরের মিক্সনগুলি সরিয়ে ফেলুন। এটি নিম্নলিখিত মত দেখতে হবে:

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

অতিরিক্তভাবে, .cancel ক্লাসে mdc-button-ink-color mixin ওভাররাইড সরিয়ে দিন:

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

background-color: $mdc-theme-background;

.shrine-logo-drawer সিলেক্টরের মধ্যে, fill প্রপার্টিটিকে অন-প্রাথমিক রঙ হিসাবে প্রতিস্থাপন করুন:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

একইভাবে, .shrine-title নির্বাচকের মধ্যে color বৈশিষ্ট্যটিকে অন-প্রাথমিক রঙ হিসাবে সেট করে:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

অবশেষে, .shrine-body নির্বাচকের অধীনে আগে ব্যবহৃত mdc-elevation মিক্সিনটি সরান।

নির্মাণ এবং চালান. নতুন থিমটি এখন আপনার ব্রাউজারে উপস্থিত হওয়া উচিত।

এখন home.html পৃষ্ঠায় পরিবর্তন দেখতে http://localhost:8080/home.html- এ নেভিগেট করুন।

8. রিক্যাপ

আপনি এখন এমন একটি অ্যাপ তৈরি করেছেন যা আপনার ডিজাইনারের স্পেসিফিকেশনের সাথে সাদৃশ্যপূর্ণ।

সম্পূর্ণ MDC-103 অ্যাপটি এই ডিরেক্টরিতে উপলব্ধ: material-components-web-codelabs/mdc-103/complete

আপনি সেই ডিরেক্টরির পৃষ্ঠার বিরুদ্ধে আপনার পৃষ্ঠার সংস্করণ পরীক্ষা করতে পারেন। প্রথমে সেই ডিরেক্টরিতে npm install চালাতে ভুলবেন না!

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

আপনি এখন নিম্নলিখিত MDC উপাদানগুলি ব্যবহার করেছেন: থিম, টাইপোগ্রাফি, উচ্চতা এবং আকৃতি৷ আপনি MDC ওয়েব ক্যাটালগে আরও উপাদান এবং সাবসিস্টেম অন্বেষণ করতে পারেন৷

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

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

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

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