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

1. บทนำ

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

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

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

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

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

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

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

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

สิ่งที่คุณต้องมี

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

คุณให้คะแนนประสบการณ์ในการพัฒนาเว็บของคุณอยู่ที่ระดับใด

ระดับเริ่มต้น

ระดับกลาง

ระดับสูง

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ทำต่อจาก MDC-102 ใช่ไหม

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

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

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

...หรือโคลนจาก GitHub

หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้

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

ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์

จากไดเรกทอรีสำหรับเริ่มต้น material-components-web-codelabs/mdc-103/starter (ซึ่งควรเป็นไดเรกทอรีปัจจุบันหากคุณทำตามขั้นตอนด้านบน) ให้เรียกใช้คำสั่งต่อไปนี้

npm install

คุณจะเห็นกิจกรรมมากมาย และในตอนท้าย เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จดังนี้

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

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

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

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

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

npm start

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

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

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

3. เปลี่ยนสี

ดีไซเนอร์ได้สร้างธีมสีนี้ด้วยสีแบบกำหนดเอง (แสดงในรูปภาพด้านล่าง) โดยมีสีที่เลือกจากแบรนด์ของ 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";

ใน 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);
  }
}

รีเฟรชหน้าเว็บที่ http://localhost:8080/home.html หน้าจอหลักควรมีลักษณะดังนี้

เรามาเปลี่ยนสีของหน้าจอเข้าสู่ระบบให้เข้ากับรูปแบบสีกัน

ใน login.scss ให้เพิ่มบรรทัดต่อไปนี้

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

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

นอกจากนี้ ให้เพิ่มการเรียกใช้ Mixin ต่อไปนี้ภายในตัวเลือก CSS .username, .password

.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";

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

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

ต่อไป เรามาจัดสไตล์รายการ Drawer กัน

เพิ่มเส้นแบ่ง

ใน 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);
  }
}

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

5. ปรับระดับความสูง

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

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

npm install @material/elevation

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

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

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

ห่อรายการรูปภาพด้วย Div ใหม่

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

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

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

ใน home.scss ให้เพิ่มโค้ดต่อไปนี้

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

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

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

6. เปลี่ยนเลย์เอาต์

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

แก้ไข 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 ให้นำ Mixin mdc-image-list-standard-columns(4) ออกและแทนที่ด้วย Mixin ต่อไปนี้

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

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

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

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

7. ลองใช้ธีมอื่น

สีเป็นวิธีที่มีประสิทธิภาพในการแสดงแบรนด์ และการเปลี่ยนแปลงสีเพียงเล็กน้อยอาจส่งผลอย่างมากต่อประสบการณ์ของผู้ใช้ เรามาลองดูว่า 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 ให้นำ Mixin ในตัวเลือก .username, .password ออก โดยควรมีลักษณะดังนี้

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

นอกจากนี้ ให้นำการลบล้าง Mixin 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;
}

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

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

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

8. สรุป

ตอนนี้คุณได้สร้างแอปที่มีลักษณะตรงตามข้อกำหนดของดีไซเนอร์แล้ว

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

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

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

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เป็นกลาง

ไม่เห็นด้วย

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

ฉันต้องการใช้ Material Components ต่อไปในอนาคต