เว็บ MDC-103: ธีมวัสดุที่มีสี รูปทรง ระดับความสูง และประเภท (เว็บ)

Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้งาน Material Design ได้ MDC สร้างขึ้นโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบรายการ และพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter material.io/develop

ใน Codelab MDC-101 และ MDC-102 คุณได้ใช้คอมโพเนนต์ Material (MDC) เพื่อสร้างพื้นฐานของแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โฟลว์ของผู้ใช้แอปนี้เริ่มต้นด้วยหน้าจอเข้าสู่ระบบ ซึ่งจะนำผู้ใช้ไปยังหน้าจอหลักที่มีผลิตภัณฑ์

เมื่อเร็วๆ นี้ Material Design ได้ขยายขอบเขตเพื่อให้ดีไซเนอร์และนักพัฒนาแอปมีความยืดหยุ่นมากขึ้นในการแสดงแบรนด์ของผลิตภัณฑ์ ในโค้ดแล็บนี้ คุณจะได้ใช้ MDC เพื่อปรับแต่งแอป Shrine ให้แสดงถึงสไตล์ที่เป็นเอกลักษณ์ของแบรนด์ในหลากหลายวิธีมากกว่าที่เคย

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะปรับแต่ง Shrine ให้แสดงถึงแบรนด์โดยใช้สิ่งต่อไปนี้

• สี
• การพิมพ์
• ระดับความสูง
• รูปร่าง
• เลย์เอาต์

นี่เป็นโค้ดแล็บสุดท้ายจาก 3 โค้ดแล็บที่จะแนะนำวิธีสร้างแอปชื่อ Shrine

คุณดู Codelab ที่เกี่ยวข้องได้ที่

• MDC-101: ข้อมูลพื้นฐานเกี่ยวกับ Material Components (MDC)
• MDC-102: โครงสร้างและเลย์เอาต์ของ Material Design

คอมโพเนนต์และระบบย่อยของ MDC Web ที่ใช้ใน Codelab นี้

• ธีม
• การพิมพ์
• ระดับความสูง
• รายการรูปภาพ

สิ่งที่ต้องมี

• Node.js เวอร์ชันล่าสุด (มาพร้อมกับ npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ JavaScript)
• โค้ดตัวอย่าง (ดาวน์โหลดได้ในขั้นตอนถัดไป)
• ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript

คุณจะให้คะแนนระดับประสบการณ์ในการพัฒนาเว็บเท่าใด

ผู้เริ่มต้น ระดับกลาง ผู้ชำนาญ

หากเคยเรียน MDC-102 มาแล้ว

หากคุณทำ MDC-102 เสร็จแล้ว โค้ดของคุณก็ควรพร้อมสำหรับโค้ดแล็บนี้ ข้ามไปขั้นตอนที่ 3: เปลี่ยนสี

ดาวน์โหลดแอป Codelab สำหรับผู้เริ่มต้น

ดาวน์โหลดแอปเริ่มต้น

แอปเริ่มต้นจะอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-103/starter อย่าลืม cd เข้าไปในไดเรกทอรีนั้นก่อนเริ่มต้น

โปรดสังเกตคำต่อท้าย -master ในชื่อของไดเรกทอรีราก หากคุณดาวน์โหลดแอปเริ่มต้นจากปุ่มด้านบน โปรดต่อท้ายด้วยคำต่อท้าย -master ทุกครั้งที่มีการอ้างอิงไดเรกทอรีรากสำหรับ Codelab ที่เหลือนี้

...หรือโคลนจาก 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 Web ใช้ตัวประมวลผล CSS ล่วงหน้าที่เรียกว่า Sass หากคุณใช้ตัวประมวลผล CSS ล่วงหน้าอื่น (หรือไม่ใช้เลย) ก็ไม่เป็นไร คุณสามารถใช้ Sass ควบคู่ไปกับตัวประมวลผลล่วงหน้าปัจจุบันได้โดยติดตั้ง sassCLI หรือใช้ปลั๊กอิน (เช่น sass-loader สำหรับ Webpack, gulp-sass สำหรับ Gulp หรือ grunt-sass สำหรับ Grunt) ในเครื่องมือสร้าง

เพื่อให้โค้ดของเราทำงานในเบราว์เซอร์รุ่นเก่าอย่าง IE 11 ได้ เราจึงใช้เครื่องมือเปลี่ยนรูปแบบที่เรียกว่า Babel เพื่อเปลี่ยนรูปแบบไวยากรณ์ JavaScript ES2015 ของ MDC Web เป็นไวยากรณ์ JavaScript ES5

เราจะใช้ webpack เพื่อจัดกลุ่มไฟล์และแสดงเว็บไซต์ในเครื่อง ระบบได้ตั้งค่าการกำหนดค่า webpack สำหรับโปรเจ็กต์นี้ให้คุณแล้วในไฟล์ webpack.config.js โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีกำหนดค่าได้ที่คู่มือการเริ่มต้นใช้งาน

เรียกใช้แอปเริ่มต้น

ในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้

npm start

webpack-dev-server จะเริ่มขึ้น ป้อน http://localhost:8080/ ในเบราว์เซอร์เพื่อดูหน้าเว็บ

หากเรียกใช้ npm install หรือ npm start ไม่สำเร็จ ให้หยุดและแก้ปัญหาในสภาพแวดล้อมของนักพัฒนาแอป

สำเร็จ! คุณควรเห็นหน้าเข้าสู่ระบบของ Shrine ทำงานในเบราว์เซอร์ กรอกข้อมูลในช่องชื่อผู้ใช้และรหัสผ่าน แล้วคลิกปุ่ม "ถัดไป" เพื่อไปยังหน้าแรก โดยควรแสดงแผงการนำทางทางด้านซ้าย ถัดจากตารางรูปภาพผลิตภัณฑ์

แม้ว่าลิ้นชักการนำทางจะใช้งานได้ แต่เรามาทำให้เข้ากับแบรนด์ Shrine โดยการเปลี่ยนสี ระดับความสูง และการพิมพ์กัน

ธีมสีนี้สร้างขึ้นโดยนักออกแบบที่มีสีที่กำหนดเอง (แสดงในรูปภาพด้านล่าง) ซึ่งประกอบด้วยสีที่เลือกจากแบรนด์ของ Shrine และนำไปใช้กับ Material Theme Editor ซึ่งได้ขยายสีเหล่านั้นเพื่อสร้างชุดสีที่สมบูรณ์ยิ่งขึ้น (สีเหล่านี้ไม่ได้มาจากชุดสี Material ของปี 2014)

มาเปลี่ยนสีของลิ้นชักการนำทางของแอป Shrine ให้สอดคล้องกับรูปแบบสีนั้นกัน

ลบล้างสีธีม

สร้างไฟล์ใหม่ชื่อ _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 ดังนั้นจึงจะมีผลกับสไตล์ของทั้ง 2 หน้า

เพิ่มการจัดรูปแบบ 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 ที่มีให้ แพ็กเกจ MDC Ripple มีทั้งมิกซ์อิน mdc-ripple และ mdc-states เนื่องจาก Ripple เกี่ยวข้องกับระบบสถานะโดยตรง

รีเฟรชหน้าที่ 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/ ตอนนี้หน้าจอเข้าสู่ระบบควรมีลักษณะดังนี้

นอกจากสีที่เปลี่ยนไปแล้ว นักออกแบบยังได้ให้ตัวอักษรเฉพาะที่คุณใช้ในเว็บไซต์ด้วย มาเพิ่มปุ่มนั้นลงในลิ้นชักการนำทางด้วยกัน

หากต้องการติดตั้งแพ็กเกจสำหรับ Typography ให้เรียกใช้คำสั่งต่อไปนี้

npm install @material/typography

เพิ่ม CSS สำหรับการจัดรูปแบบข้อความ

ใน home.scss ให้เพิ่มคำสั่งนำเข้าต่อไปนี้หลังจากการนำเข้าที่มีอยู่

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

จากนั้นเพิ่มการเรียกใช้มิกซ์อินต่อไปนี้ลงในคลาส shrine-title

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

คุณตั้งค่าการจัดรูปแบบข้อความได้โดยใช้ Sass Mixin ดังที่เราได้ทำที่นี่ หรือโดยการรวมคลาสประเภทที่เฉพาะเจาะจง (เช่น 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;
}

ปรับรายการรูปภาพและป้ายกำกับ

หากต้องการปรับรายการและป้ายกำกับ ให้เพิ่มรูปแบบต่อไปนี้ลงใน home.scss ภายในตัวเลือก .product-list

.product-list {
  ...

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

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

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

รีเฟรชหน้าเว็บ ตอนนี้หน้าจอหลักควรมีลักษณะดังนี้

ตอนนี้คุณได้จัดรูปแบบหน้าเว็บด้วยการลงสีและตัวอักษรเฉพาะของ Shrine แล้ว มาดูรายการรูปภาพที่แสดงผลิตภัณฑ์ของ Shrine กัน มาทำให้ผลิตภัณฑ์โดดเด่นขึ้นด้วยการเน้นย้ำผลิตภัณฑ์ให้มากขึ้นกัน

หากต้องการติดตั้งแพ็กเกจสำหรับ Elevation ให้เรียกใช้คำสั่งต่อไปนี้

npm install @material/elevation

เพิ่มคำสั่งนำเข้า

ใน home.scss ให้เพิ่มบรรทัดต่อไปนี้หลังคำสั่งนำเข้าสุดท้าย

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

รวมรายการรูปภาพไว้ใน Div ใหม่

ใน home.html ให้เพิ่มมาร์กอัปต่อไปนี้รอบองค์ประกอบ <ul>

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

เปลี่ยนระดับความสูงโดยใช้ Sass Mixin

ใน home.scss ให้เพิ่มรายการต่อไปนี้

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

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

การยกระดับจะใช้โดยการเรียกใช้ mdc-elevation Sass Mixin ภายในตัวเลือกที่แสดงถึงองค์ประกอบที่คุณต้องการยกระดับ

น่าประทับใจมาก คุณได้เพิ่มเงาที่ขอบด้านซ้ายของพื้นผิวสีขาวด้านหลังรายการรูปภาพ เพื่อให้ดูเหมือนลอยอยู่เหนือการนำทางเล็กน้อย

จากนั้นมาเปลี่ยนเลย์เอาต์เพื่อแสดงรูปภาพในสัดส่วนและขนาดต่างๆ เพื่อให้แต่ละรูปภาพดูไม่ซ้ำกัน

แก้ไข HTML

ใน home.html ให้อัปเดตองค์ประกอบ mdc-image-list ให้มีคลาส mdc-image-list--masonry ดังนี้

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

เพิ่มภาพ

ใน home.html ให้เปลี่ยนแอตทริบิวต์ src ขององค์ประกอบ img แต่ละรายการให้ตรงกับรูปภาพที่อยู่ในโฟลเดอร์ assets จากนั้นอัปเดตข้อความป้ายกำกับสำหรับแต่ละรูปภาพ เมื่อเสร็จแล้ว ควรมีลักษณะดังนี้

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

จากนั้นเพิ่มpaddingค่าproduct-listต่อไปนี้ลงในคลาส home.scss

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

ตอนนี้โค้ดของคุณควรตรงกับโค้ดที่รวมอยู่ในโฟลเดอร์ complete/

ปัจจุบันคอมโพเนนต์รายการรูปภาพมี 2 รูปแบบ ได้แก่ มาตรฐานและเมสันรี ซึ่งช่วยให้กำหนดขนาดรายการในลิสต์ให้แตกต่างกันหรือจัดวางในลักษณะที่เฉพาะเจาะจงได้

สีเป็นวิธีที่มีประสิทธิภาพในการแสดงออกถึงแบรนด์ และการเปลี่ยนแปลงสีเพียงเล็กน้อยอาจส่งผลอย่างมากต่อประสบการณ์ของผู้ใช้ มาลองดูว่า Shrine จะมีลักษณะอย่างไรหากรูปแบบสีของแบรนด์แตกต่างออกไปโดยสิ้นเชิง

แก้ไข 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;
}

นอกจากนี้ ให้นำการลบล้างมิกซ์อิน mdc-button-ink-color ออกในคลาส .cancel ดังนี้

ใน home.scss ให้เพิ่มกฎต่อไปนี้ลงในคลาส .home

background-color: $mdc-theme-background;

ในตัวเลือก .shrine-logo-drawer ให้แทนที่พร็อพเพอร์ตี้ fill ด้วยสี on-primary

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

ในทำนองเดียวกัน ภายในตัวเลือก .shrine-title ให้ตั้งค่าพร็อพเพอร์ตี้ color เป็นสี on-primary ดังนี้

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

สุดท้าย ให้นำ mdc-elevation มิกซ์อินที่ใช้ก่อนหน้านี้ออกภายใต้ตัวเลือก .shrine-body

สร้างและเรียกใช้ ตอนนี้ธีมใหม่ควรปรากฏในเบราว์เซอร์แล้ว

ตอนนี้ให้ไปที่ http://localhost:8080/home.html เพื่อดูการเปลี่ยนแปลงในหน้า home.html

ตอนนี้คุณได้สร้างแอปที่คล้ายกับข้อกำหนดของนักออกแบบแล้ว

แอป MDC-103 ที่เสร็จสมบูรณ์แล้วจะอยู่ในไดเรกทอรีนี้ material-components-web-codelabs/mdc-103/complete

คุณสามารถทดสอบหน้าเวอร์ชันของคุณกับหน้าในไดเรกทอรีนั้นได้ อย่าลืมเรียกใช้ npm install ในไดเรกทอรีนั้นก่อน

ขั้นตอนถัดไป

ตอนนี้คุณได้ใช้คอมโพเนนต์ MDC ต่อไปนี้แล้ว ได้แก่ ธีม การออกแบบตัวอักษร ระดับความสูง และรูปร่าง คุณดูคอมโพเนนต์และระบบย่อยเพิ่มเติมได้ในแคตตาล็อกเว็บ MDC

ฉันทำ Codelab นี้เสร็จได้โดยใช้เวลาและความพยายามที่สมเหตุสมผล

เห็นด้วยอย่างยิ่ง เห็นด้วย เป็นกลาง ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง

ฉันต้องการใช้คอมโพเนนต์ Material ต่อไปในอนาคต

เห็นด้วยอย่างยิ่ง เห็นด้วย เป็นกลาง ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง