Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC to stworzona przez zespół inżynierów i projektantów UX z Google biblioteka zawierająca dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu. Jest dostępna na platformy Android, iOS, internet i Flutter. material.io/develop |
W samouczkach 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 na więcej sposobów niż dotychczas.
Co utworzysz
W tym ćwiczeniu dostosujesz aplikację Shrine do swojej marki, używając:
- Kolor
- Typografia
- Wysokość
- Kształt
- Układ
Komponenty i podsystemy MDC Web użyte w tym kursie
- 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?
Kontynuujesz naukę z MDC-102?
Jeśli masz już za sobą MDC-102, kod powinien być gotowy do użycia w tym ćwiczeniu. Przejdź do kroku 3: Zmień kolor.
Pobieranie aplikacji do ćwiczeń z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-103/starter. Zanim zaczniesz, cd do tego katalogu.
...lub sklonuj go z GitHub
Aby sklonować 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
Instalowanie zależności projektu
W katalogu początkowym material-components-web-codelabs/mdc-103/starter (powinien to być Twój 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:
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/.
Gotowe! W przeglądarce powinna się wyświetlić strona logowania Shrine. Wypełnij pola Nazwa użytkownika i Hasło, a potem kliknij przycisk „Dalej”, aby przejść na stronę główną. Powinna wyświetlać szufladę nawigacyjną po lewej stronie obok siatki zdjęć produktów.
Menu nawigacyjne działa, ale dopasujmy je do marki Shrine, zmieniając jego kolor, wysokość i typografię.
Ten motyw kolorystyczny został utworzony przez projektanta z użyciem kolorów niestandardowych (widocznych na obrazie poniżej). Zawiera kolory wybrane z marki Shrine i zastosowane w edytorze motywów Material Design, który rozszerzył je, aby stworzyć pełniejszą paletę. (Te kolory nie pochodzą z palet kolorów Material z 2014 roku).
Zmieńmy kolor szuflady nawigacyjnej aplikacji Shrine, aby odzwierciedlał ten schemat kolorów.
Zastępowanie kolorów motywu
Utwórz nowy plik o nazwie _variables.scss zawierający 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 u góry _common.scss:
@import "./variables";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);
}
}Odśwież stronę pod adresem 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:
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
Dodaj 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);
...
}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:
Strona ma już stylizację z określonymi kolorami i typografią Shrine. Przyjrzyjmy się teraz liście obrazów przedstawiających produkty Shrine. Zwróćmy uwagę na produkty, bardziej je eksponując.
Aby zainstalować pakiet dla Elevation, uruchom polecenie:
npm install @material/elevation
Dodaj instrukcję importu
W pliku home.scss dodaj po ostatniej instrukcji importu ten wiersz:
@import "@material/elevation/mdc-elevation";Owiń listę obrazów nowym elementem div
W elemencie 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
}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ą.
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ł inaczej niż pozostałe.
Zmodyfikuj kod HTML
W pliku 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">Dodawanie obrazów
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>Aktualizacja CSS
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/.
Kolor to skuteczny sposób na wyrażenie tożsamości marki, a nawet 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. Powinno to wyglądać mniej więcej 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 zamień właściwość fill na kolor 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 adres http://localhost:8080/home.html, aby zobaczyć zmiany na stronie home.html.
Aplikacja jest teraz zgodna ze specyfikacją projektanta.
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.