MDC-103 Web: łączenie tematów z materiałami według koloru, kształtu, wysokości i typu (sieć)

1. Wprowadzenie

Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC zostało stworzone przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu, które są dostępne na platformach Android, iOS, internetowej i Flutter.material.io/develop

W warsztatach MDC-101 i MDC-102 używasz komponentów Material Design (MDC) do tworzenia podstaw aplikacji Shrine, czyli aplikacji e-commerce do sprzedaży odzieży i artykułów gospodarstwa domowego. Ścieżka użytkownika w tej aplikacji zaczyna się od ekranu logowania, który prowadzi do ekranu głównego z produktami.

Niedawno rozszerzyliśmy Material Design, aby zapewnić projektantom i programistom większą elastyczność w zakresie wyrażania marki produktu. W tym module dowiesz się, jak za pomocą MDC dostosować aplikację Shrine, aby odzwierciedlała unikalny styl marki w większej liczbie aspektów niż dotychczas.

Co utworzysz

W tym ćwiczeniu dostosujesz aplikację Shrine do swojej marki, używając:

• Kolor
• Typografia
• Wysokość
• Kształt
• Układ

To ostatnie z 3 ćwiczeń z programowania, które przeprowadzą Cię przez proces tworzenia aplikacji o nazwie Shrine.

Powiązane ćwiczenia znajdziesz na tych stronach:

• MDC-101: Material Components (MDC) Basics
• MDC-102. Struktura i układ Material Design

Komponenty i podsystemy MDC Web użyte w tym ćwiczeniu

• Motyw
• Typografia
• Wysokość
• Lista obrazów

Czego potrzebujesz

• Najnowsza wersja Node.js (w pakiecie z npm, menedżerem pakietów JavaScript).
• przykładowy kod (do pobrania w następnym kroku);
• Podstawowa znajomość języków HTML, CSS i JavaScript

Jak oceniasz swój poziom doświadczenia w zakresie tworzenia stron internetowych?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego

Kontynuujesz naukę z MDC-102?

Jeśli udało Ci się ukończyć MDC-102, kod powinien być gotowy do użycia w tym ćwiczeniu. Przejdź do kroku 3: Zmień kolor.

Pobierz aplikację Codelabs

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-103/starter. Zanim zaczniesz, cd do tego katalogu.

Zwróć uwagę na sufiks -master w nazwie katalogu głównego. Jeśli pobierasz aplikację startową za pomocą przycisku powyżej, w dalszej części tego ćwiczenia dodawaj sufiks -master, gdy tylko będziesz odwoływać się do katalogu głównego.

...lub sklonuj go z GitHub

Aby skopiować ten codelab z GitHuba, uruchom te polecenia:

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

Więcej informacji: Klonowanie repozytorium z GitHub

Instalowanie zależności projektu

W katalogu początkowym material-components-web-codelabs/mdc-103/starter (powinien to być bieżący katalog, jeśli wykonasz powyższy krok) uruchom:

npm install

Zobaczysz wiele działań, a na końcu w terminalu powinien pojawić się komunikat o pomyślnej instalacji:

MDC Web korzysta z preprocesora CSS o nazwie Sass. Jeśli używasz innego preprocesora CSS (lub nie używasz żadnego), to w porządku. Możesz używać Sass razem z obecnym preprocesorem, instalując interfejs wiersza poleceń sass lub używając wtyczki (np. sass-loader w Webpacku, gulp-sass w Gulp lub grunt-sass w Grunt) w łańcuchu narzędzi do kompilacji.

Aby nasz kod działał w starszych przeglądarkach, takich jak IE 11, używamy transpilatora Babel, który przekształca składnię JavaScript ES2015 w składnię JavaScript ES5.

Do spakowania plików i lokalnego udostępniania witryny użyjemy webpacka. Konfiguracja webpacka dla tego projektu została już skonfigurowana w pliku webpack.config.js. Więcej informacji o konfiguracji znajdziesz w przewodniku dla początkujących.

Uruchom aplikację startową

W tym samym katalogu uruchom:

npm start

Rozpocznie się webpack-dev-server. Aby wyświetlić stronę, otwórz w przeglądarce adres http://localhost:8080/.

Jeśli nie udało Ci się uruchomić poleceń npm install lub npm start, zatrzymaj się i rozwiąż problemy ze środowiskiem deweloperskim.

Gotowe! W przeglądarce powinna się wyświetlić strona logowania Shrine. Wypełnij pola Nazwa użytkownika i Hasło, a następnie kliknij przycisk „Dalej”, aby przejść na stronę główną. Powinien wyświetlać panel nawigacji po lewej stronie, obok siatki zdjęć produktów.

Panel nawigacji działa, ale dopasujmy go do marki Shrine, zmieniając kolor, wysokość i typografię.

3. Zmień kolor

Ten motyw kolorystyczny został utworzony przez projektanta z użyciem spersonalizowanych kolorów (widocznych na obrazie poniżej). Zawiera kolory wybrane z marki Shrine i zastosowane w Material Theme Editor, który rozszerzył je, aby utworzyć pełniejszą paletę. (Te kolory nie pochodzą z palet kolorów Material z 2014 roku).

Zmieńmy kolor panelu nawigacji aplikacji Shrine, aby odzwierciedlał ten schemat kolorów.

Zastępowanie kolorów motywu

Utwórz nowy plik o nazwie _variables.scss, który będzie zawierać te informacje:

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

Następnie zaimportuj go na samym początku pliku _common.scss:

@import "./variables";

Wszystkie zmienne globalne, które chcesz zastąpić (np. $mdc-theme-primary lub $mdc-theme-secondary), musisz zadeklarować przed zaimportowaniem stylów komponentów do plików *.scss. W tym przypadku _common.scss to częściowy plik, który jest importowany przed innymi elementami w login.scss i home.scss, więc będzie stosowany do stylów obu stron.

Dodawanie stylu CSS do panelu nawigacyjnego

W pliku home.scss dodaj po dotychczasowych instrukcjach importu tę instrukcję:

@import "@material/ripple/mixins";

Następnie dodaj te style, tworząc klasę .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);
  }
}

Zaimportowaliśmy @material/ripple/mixins, aby obsługiwać miksin mdc-states-activated, który udostępnia. Pakiet MDC Ripple zawiera zarówno miksiny mdc-ripple, jak i mdc-states, ponieważ efekt fali jest bezpośrednio powiązany z systemem stanów.

Odśwież stronę http://localhost:8080/home.html. Ekran główny powinien teraz wyglądać tak:

Zmieńmy kolor ekranu logowania, aby pasował do naszego schematu kolorów.

Dodawanie stylów CSS do strony logowania

W sekcji login.scss dodaj te wiersze:

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

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

Dodaj też te wywołania mixinów w selektorze 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);
  }
  ...
}

Odśwież stronę pod adresem http://localhost:8080/. Ekran logowania powinien teraz wyglądać tak:

4. Modyfikowanie typografii i stylów etykiet

Oprócz zmian kolorów projektant podał też konkretną typografię, której należy używać w witrynie. Dodajmy go też do panelu nawigacji.

Aby zainstalować pakiet Typografia, uruchom:

npm install @material/typography

Dodawanie kodu CSS do typografii

W pliku home.scss dodaj po dotychczasowych instrukcjach importu tę instrukcję:

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

Następnie dodaj do klasy shrine-title to wywołanie mixinu:

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

Typografię można ustawić za pomocą miksu Sass, jak w tym przypadku, lub przez dodanie do elementu konkretnej klasy typu (np. class="mdc-typography--headline6").

Następnie nadajmy styl elementom szuflady.

Dodawanie separatora wiersza

W pliku home.html dodaj ten kod bezpośrednio po elemencie <a ...>Featured</a>:

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

Dodaj do pliku home.scss te style:

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

Dostosowywanie elementów obrazu i etykiet

Aby dostosować elementy i etykiety, dodaj te style do elementu home.scss w selektorze .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);
  }
}

Odśwież stronę. Ekran główny powinien teraz wyglądać tak:

5. Dostosowywanie wysokości

Strona ma już stylizację z konkretną kolorystyką i typografią Shrine. Przyjrzyjmy się teraz liście obrazów przedstawiających produkty Shrine. Zwróćmy uwagę na produkty, nadając im większe znaczenie.

Aby zainstalować pakiet dla Elevation, uruchom to polecenie:

npm install @material/elevation

Dodaj instrukcję importu

W pliku home.scss dodaj ten wiersz po ostatniej instrukcji importu:

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

Owiń listę obrazów nowym elementem div

W sekcji home.html dodaj ten znacznik wokół elementu <ul>:

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

Zmiana wysokości za pomocą miksinów Sass

W sekcji home.scss dodaj te informacje:

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

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

Podniesienie jest stosowane przez wywołanie mdc-elevation miksu Sass w selektorze reprezentującym elementy, które mają zostać podniesione.

Doskonale. Do lewej krawędzi białej powierzchni za elementami listy obrazów dodano cień, dzięki czemu wydaje się ona lekko unosić nad nawigacją.

6. Zmiana układu

Następnie zmieńmy układ, aby wyświetlać obrazy o różnych współczynnikach proporcji i rozmiarach, tak aby każdy obraz wyglądał niepowtarzalnie na tle innych.

Zmodyfikuj kod HTML

W home.html zaktualizuj element mdc-image-list, aby zawierał klasę mdc-image-list--masonry:

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

Dodaj obrazy

W pliku home.html zmień atrybut src każdego elementu img, aby pasował do obrazów znajdujących się w folderze assets. Następnie zaktualizuj tekst etykiety dla każdego obrazu. Po zakończeniu powinna wyglądać tak:

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

Aktualizowanie usługi porównywania cen

W pliku home.scss usuń miksin mdc-image-list-standard-columns(4) i zastąp go tym miksinem:

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

Następnie dodaj te wartości padding do klasy product-list w pliku home.scss:

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

Kod powinien być teraz zgodny z kodem w folderze complete/.

Komponent listy obrazów zawiera obecnie 2 warianty: standardowy i masonry, które umożliwiają zmianę rozmiaru elementów listy lub ich rozmieszczenie w określony sposób.

7. Wypróbuj inny motyw

Kolor to skuteczny sposób na wyrażenie tożsamości marki, a niewielka zmiana koloru może mieć duży wpływ na wrażenia użytkowników. Aby to sprawdzić, zobaczmy, jak wyglądałaby aplikacja Shrine, gdyby schemat kolorów marki był zupełnie inny.

Modyfikowanie usługi porównywania cen

W pliku _variables.scss zastąp zmienne zadeklarowane dla motywu podstawowego tymi:

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

W login.scss usuń mixiny w selektorze .username, .password. Powinien on wyglądać tak:

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

Dodatkowo usuń zastąpienie miksu mdc-button-ink-color w klasie .cancel:

W pliku home.scss dodaj do klasy .home tę regułę:

background-color: $mdc-theme-background;

W selektorze .shrine-logo-drawer zastąp właściwość fill kolorem on-primary:

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

Podobnie w selektorze .shrine-title ustaw właściwość color na kolor on-primary:

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

Na koniec usuń mdc-elevation mixin użyty wcześniej w selektorze .shrine-body.

Skompiluj i uruchom. Nowy motyw powinien być teraz widoczny w przeglądarce.

Teraz otwórz stronę http://localhost:8080/home.html, aby zobaczyć zmiany na stronie home.html.

8. Podsumowanie

Aplikacja jest teraz zgodna ze specyfikacją projektanta.

Wypełniony formularz MDC-103 jest dostępny w tym katalogu: material-components-web-codelabs/mdc-103/complete

Możesz przetestować swoją wersję strony w porównaniu ze stroną w tym katalogu. Nie zapomnij najpierw uruchomić npm install w tym katalogu.

Dalsze kroki

Używasz teraz tych komponentów MDC: motyw, typografia, cień i kształt. Więcej komponentów i podsystemów znajdziesz w katalogu MDC Web.

Udało mi się ukończyć to ćwiczenie w rozsądnym czasie i przy rozsądnym nakładzie pracy.

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam

Chcę nadal korzystać z komponentów Material

Zdecydowanie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam