หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

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

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

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

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

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

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

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

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

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

Node.js เวอร์ชันล่าสุด (ซึ่งมาพร้อมกับ npm ซึ่งเป็นตัวจัดการแพ็กเกจ JavaScript)
โค้ดตัวอย่าง (จะดาวน์โหลดในขั้นตอนถัดไป)
ความรู้พื้นฐานเกี่ยวกับ 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 Preprocessor ตัวอื่น (หรือไม่ใช้เลย) ก็ไม่เป็นไร คุณใช้ Sass ควบคู่ไปกับ Preprocessor ปัจจุบันได้โดยติดตั้ง sass CLI หรือใช้ปลั๊กอิน (เช่น sass-loader สำหรับ Webpack, gulp-sass สำหรับ Gulp หรือ grunt-sass สำหรับ Grunt) ใน Toolchain ของบิลด์

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

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

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

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

npm start

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

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

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

3. เปลี่ยนสี

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

นอกจากนี้ ให้เพิ่มคำขอมิกซ์ต่อไปนี้ในตัวเลือก 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. แก้ไขการออกแบบตัวอักษรและรูปแบบป้ายกำกับ

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

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

npm install @material/typography

เพิ่ม CSS สำหรับการพิมพ์

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

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

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

.shrine-title {
  @include 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);
  }
}

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

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

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

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

npm install @material/elevation

เพิ่มข้อความการนำเข้า

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

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

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

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

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

เปลี่ยนระดับความสูงโดยใช้มิกซ์อินของ 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 ให้นำมิกซ์เพลง 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/

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 ให้นำมิกซ์อินในตัวเลือก .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 เป็นสีบนสีหลัก ดังนี้

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

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

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

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

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

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

8. สรุป

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

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

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

ฉันทำ Codelab นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

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

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

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

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