1. Wprowadzenie
Material Komponenty (MDC) pomagają deweloperom wdrażać interfejs Material Design. MDC to biblioteka stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki pięknych i funkcjonalnych komponentów UI. Jest dostępna na Androida, iOS, web i Flutter.material.io/develop |
W tym ćwiczeniu użyjesz 2 komponentów Material Design (MDC) do utworzenia interfejsu strony logowania: pola tekstowego i przycisku. Teraz rozszerzymy to o dodanie nawigacji, struktury i danych.
Co utworzysz
W tym ćwiczeniu w Codelab utworzysz stronę główną aplikacji Shrine, która jest aplikacją e-commerce sprzedającą odzież i wyposażenie domowe. Będą one zawierać:
- Panel nawigacji
- Lista obrazów z produktami
Komponenty internetowe MDC w tym ćwiczeniu z programowania
- Panel
- Lista obrazów
Czego potrzebujesz
- najnowsza wersja Node.js (dołączona do npm, menedżera 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-101?
Jeśli ukończyłeś/ukończyłaś kurs MDC-101, Twój kod powinien być gotowy do użycia w tym ćwiczeniu. Przejdź do kroku 3. Dodaj panel nawigacji.
Pobierz aplikację Codelab dla początkujących
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-102/starter. Zanim zaczniesz, przejdź do tego katalogu.
...lub sklonuj 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-102/starter
Instalowanie zależności projektu
Bieżący katalog powinien być material-components-web-codelabs/mdc-102/starter.. Stamtąd uruchom to polecenie:
npm install
Gdy pojawi się dużo działań, terminal powinien informować o pomyślnej instalacji:
Uruchomienie aplikacji startowej
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! Powinna się wyświetlić strona logowania do Shrine z MDC-101.
Strona logowania wygląda już dobrze, więc uzupełnijmy aplikację o produkty. Wpisz prawidłową nazwę użytkownika i hasło, a następnie kliknij przycisk „Dalej”, aby przejść do strony głównej.
3. Dodawanie panelu nawigacji
Gdy użytkownik zaloguje się, na stronie głównej pojawi się komunikat „You did it!” (To się udało!). Wspaniale. Teraz użytkownik musi wykonać określone czynności i wiedzieć, gdzie się znajduje w aplikacji. Aby mu to ułatwić, dodajmy nawigację.
Wzorce nawigacji w stylu Material Design zapewniają wysoki stopień użyteczności. Panel nawigacyjny w stylu Material Design umożliwia nawigację i szybki dostęp do innych działań. Dodajmy jedną.
Instalowanie szuflady i listy MDC
Aby zainstalować pakiety dla komponentu szuflady, uruchom:
npm install @material/drawer @material/list
Dodawanie kodu HTML
W home.html zastąp tekst „You did it!” (Udało się!) tym znacznikiem dla szuflady i jej elementów:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
Dodawanie kodu CSS
W pliku home.scss dodaj po dotychczasowej instrukcji importu te instrukcje:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
U dołu strony home.scss dodaj te style:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
Dodawanie kodu JavaScript
Aby umożliwić prawidłową nawigację za pomocą klawiatury, musimy utworzyć instancję listy MDC w panelu nawigacji. Otwórz plik home.js, który jest obecnie pusty, i dodaj ten kod:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
Odśwież stronę http://localhost:8080/home.html. Twoja strona główna powinna wyglądać tak:
Teraz na stronie głównej znajduje się stały panel nawigacji, w którym wyświetlają się różne elementy nawigacyjne, przy czym pierwszy jest aktywny.
4. Dodawanie obrazów z etykietami tekstowymi
Teraz, gdy nasza aplikacja ma już pewną strukturę, uporządkujmy zawartość, umieszczając ją na liście obrazów.
Zainstaluj listę obrazów MDC
Aby zainstalować pakiet dla komponentu listy obrazów, uruchom:
npm install @material/image-list
Dodawanie kodu HTML do listy z jednym elementem
Zacznijmy od dodania listy obrazów obok szuflady nawigacyjnej. Listę zaczynamy od dodania pojedynczego elementu, który składa się z obrazu i etykiety tekstowej.
W pliku home.html dodaj ten kod HTML po elemencie <aside>:
<ul class="mdc-image-list product-list">
<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>
Lista zawiera dodatkową klasę product-list, która zastosuje niestandardowe style zarówno w tym samouczku, jak i w MDC-103.
Dodawanie kodu CSS
Najpierw w pliku home.scss dodaj instrukcje importu stylów komponentu listy obrazów po dotychczasowych instrukcjach importu:
@import "@material/image-list/mdc-image-list";
Następnie dodaj następujące style po początkowych stylach strony głównej:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Te style każą na liście obrazów wyświetlać obrazy w 4 kolumnach. Dzięki temu lista obrazów przewija się niezależnie od panelu.
Odśwież stronę. Strona główna powinna teraz wyglądać tak:
Lista obrazów ma wyświetlać wiele obrazów w kolekcji, dlatego dodajmy więcej obrazów, by lepiej zrozumieć, jak działa komponent.
W interfejsie home.html skopiuj istniejący element <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>
Następnie wklej go 15 razy po dotychczasowym elemencie (przed zamykającym tagiem </ul>). Łącznie uzyskasz 16 obrazów. Nie musisz jeszcze przejmować się unikalnymi obrazami ani tytułami. W ramach MDC-103 poradzisz sobie z nimi.
Odśwież. Teraz strona główna powinna wyglądać tak:
Lista obrazów zawiera 4 obrazy na wiersz, a ich rozmiar jest dostosowywany automatycznie do dostępnej przestrzeni na ekranie.
5. Podsumowanie
W witrynie obowiązuje podstawowy proces, który prowadzi użytkownika ze strony logowania na stronę główną, na której można obejrzeć produkty. Za pomocą kilku linijek kodu dodaliśmy do aplikacji listę obrazów i schownię, aby prezentować treści. Strona główna ma teraz podstawową strukturę i zawartość.
Dalsze kroki
Dzięki zastosowaniu szuflady i listy obrazów udało Ci się użyć 2 kolejnych podstawowych komponentów Material Design z biblioteki MDC Web. Więcej komponentów znajdziesz w katalogu internetowym MDC.
Chociaż strona główna działa już w pełni, nie wyraża jeszcze żadnej konkretnej marki ani punktu widzenia. W kursie MDC-103: Motywowanie Material Design za pomocą koloru, kształtu, wyeksponowania i rodzaju dowiesz się, jak dostosować styl tych komponentów, aby wyrazić żywą, nowoczesną markę.