1. Wprowadzenie
Material Komponenty (MDC) pomagają deweloperom wdrażać interfejs Material Design. MDC, stworzona przez zespół inżynierów i projektantów UX w Google, zawiera dziesiątki pięknych i funkcjonalnych komponentów interfejsu. Jest dostępny na Androida, iOS, internet oraz Flutter.material.io/develop |
W ramach ćwiczeń z programowania MDC-101 i MDC-102 podstawowe informacje o aplikacji o nazwie Shrine zostały opracowane z wykorzystaniem komponentów Material Komponenty (MDC). Proces użytkownika w tej aplikacji rozpoczyna się od ekranu logowania, a następnie wyświetla się ekran główny z produktami.
Niedawno rozszerzyliśmy Material Design, aby dać projektantom i deweloperom większą elastyczność wyrażania marki produktu. W tym module z kodem użyjesz MDC, aby dostosować aplikację Shrine, aby odzwierciedlała unikalny styl marki na więcej niż kiedykolwiek dotąd sposoby.
Co utworzysz
W ramach tego ćwiczenia w programowaniu dostosujesz Shrine tak, aby odzwierciedlała jej markę, przy użyciu:
- Kolor
- Typografia
- Wysokość
- Kształt
- Układ
Komponenty i podsystemy internetowe MDC używane w tym ćwiczeniu z programowania
- Motyw
- Typografia
- Wysokość
- Lista obrazów
Czego potrzebujesz
- Nową wersję Node.js (w pakiecie z npm – menedżerem pakietów JavaScript).
- Przykładowy kod (do pobrania w następnym kroku)
- Podstawowa znajomość języka HTML, CSS i JavaScript
Jak oceniasz swój poziom doświadczenia w tworzeniu stron internetowych?
2. Konfigurowanie środowiska programistycznego
Przechodzisz z MDC-102?
Jeśli masz ukończone wszystkie etapy MDC-102, Twój kod powinien być gotowy do wykorzystania w tym ćwiczeniu z programowania. Przejdź do kroku 3. Zmień kolor.
Pobierz aplikację startową z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-103/starter. Pamiętaj, aby przed rozpoczęciem przejść do tego katalogu: cd.
...lub skopiuj je z GitHuba
Aby skopiować to ćwiczenia z programowania 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
Z katalogu startowego material-components-web-codelabs/mdc-103/starter (powinien to być bieżący katalog, jeśli wykonasz powyższy krok) i uruchom:
npm install
Zobaczysz dużo aktywności, a na końcu terminala powinna pojawić się wiadomość o pomyślnej instalacji:
Uruchamianie aplikacji startowej
W tym samym katalogu uruchom polecenie:
npm start
Rozpocznie się webpack-dev-server. Aby wyświetlić tę stronę, wpisz w przeglądarce adres http://localhost:8080/.
Gotowe! W przeglądarce powinna wyświetlić się strona logowania do Shrine. Wypełnij pola Nazwa użytkownika i Hasło, a następnie kliknij przycisk „Dalej”. , aby przejść do strony głównej. Po lewej stronie, obok siatki zdjęć produktów, powinien wyświetlić się panel nawigacji.
Panel nawigacji działa, ale chcemy, by pasował do marki Shrine, zmieniając jego kolor, wysokość i typografię.
3. Zmiana koloru
Ten motyw kolorystyczny został utworzony przez projektanta z niestandardowymi kolorami (widocznymi na ilustracji poniżej). Zawiera kolory, które zostały wybrane od marki Shrine i zastosowane w edytorze motywów Material Design, co spowodowało ich poszerzenie w celu uzyskania bogatszej palety. (Te kolory nie pochodzą z palety kolorów Material z 2014 roku).
Zmieńmy kolor panelu nawigacji aplikacji Shrine, aby odzwierciedlić ten schemat kolorów.
Zastępowanie kolorów motywu
Utwórz nowy plik o nazwie _variables.scss zawierający:
$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 samej górze _common.scss:
@import "./variables";
Dodawanie stylów CSS do panelu nawigacji
Po zaimportowaniu danych do pliku home.scss dodaj 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ę http://localhost:8080/home.html. Twój ekran główny powinien teraz wyglądać tak:
Zmieńmy kolor ekranu logowania, aby pasował do naszego schematu kolorów.
Dodawanie stylu CSS do strony logowania
W 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);
}
W selektorze CSS .username, .password dodaj też te wywołania miksu:
.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ę http://localhost:8080/. Twój ekran logowania powinien teraz wyglądać tak:
4. Modyfikowanie typografii i stylów etykiet
Oprócz zmian kolorów projektant udostępnił również specjalną typografię do wykorzystania w witrynie. Dodajmy to też do panelu nawigacji.
Aby zainstalować pakiet Typografii, uruchom polecenie:
npm install @material/typography
Dodaj kod CSS do typografii
W sekcji home.scss po importowaniu dodaj tę deklarację:
@import "@material/typography/mdc-typography";
Następnie dodaj do klasy shrine-title to wywołanie Mixin:
.shrine-title {
@include mdc-typography(headline6);
...
}
Teraz nadajmy styl elementom w szufladzie.
Dodawanie separatora wierszy
W elemencie home.html bezpośrednio po elemencie <a ...>Featured</a> dodaj:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Dodaj do 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 i etykiet obrazów
Aby dostosować elementy i etykiety, za pomocą selektora .product-list dodaj do elementu home.scss te style:
.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ę. Twój ekran główny powinien teraz wyglądać tak:
5. Dostosuj wysokość
Po dostosowaniu stylu strony do właściwych kolorów i typografii Shrine przyjrzyjmy się liście obrazów przedstawiających produkty Shrine. Chcemy zwrócić uwagę na produkty, podkreślając je.
Aby zainstalować pakiet funkcji Elevation, uruchom polecenie:
npm install @material/elevation
Dodaj oświadczenie dotyczące importu
W home.scss dodaj ten wiersz po ostatniej instrukcji importu:
@import "@material/elevation/mdc-elevation";
Zawijanie listy obrazów nowym elementem div
W pliku home.html dookoła elementu <ul> dodaj te znaczniki:
<div class="shrine-body">
<ul...>
</div>
Zmienianie wysokości za pomocą składanek Sass
W polu home.scss dodaj:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Doskonale. Dodano cień do lewej krawędzi białej powierzchni za elementami listy obrazów, przez co wydaje się ona unosić się nieco nad obszarem nawigacyjnym.
6. Zmienianie układu
Następnie zmienimy układ, aby wyświetlić obrazy w różnych formatach obrazu i o różnych rozmiarach, aby każdy obraz wyglądał inaczej niż inne.
Modyfikowanie kodu HTML
W home.html zaktualizuj element mdc-image-list, tak aby zawierał klasę mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Dodawanie obrazów
W narzędziu 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 każdego obrazu. Po zakończeniu powinno wyglądać mniej więcej 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 przypadku języka home.scss usuń składankę mdc-image-list-standard-columns(4) i zastąp ją taką:
@include mdc-image-list-masonry-columns(4);
Następnie dodaj te wartości padding do klasy product-list w home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Twój kod powinien być teraz zgodny z kodem w folderze complete/.
7. Wypróbuj inny motyw
Kolory to skuteczny sposób zaprezentowania marki, a niewielka zmiana koloru może mieć duży wpływ na wrażenia użytkownika. Aby to przetestować, zobaczmy, jak wyglądałaby Shrine, gdyby schemat kolorów jej marki był zupełnie inny.
Modyfikowanie CSS
W narzędziu _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 języku login.scss usuń kombinacje w selektorze .username, .password. Powinien wyglądać mniej więcej tak:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Dodatkowo usuń zastąpienie zestawu mdc-button-ink-color z klasy .cancel:
W home.scss dodaj tę regułę do klasy .home:
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ń używaną wcześniej kombinację mdc-elevation za pomocą selektora .shrine-body.
Twórz i uruchamiaj. Nowy motyw powinien pojawić się w przeglądarce.
Przejdź teraz pod adres http://localhost:8080/home.html, aby zobaczyć zmiany na stronie home.html.
8. Podsumowanie
Masz już aplikację, której styl przypomina specyfikację projektanta.
Dalsze kroki
Korzystasz teraz z tych komponentów MDC: motyw, typografia, wysokość i kształt. Więcej komponentów i podsystemów znajdziesz w MDC Web Catalog.