Informacje o tym ćwiczeniu (w Codelabs)
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 programie MDC-101 do utworzenia UI strony logowania wykorzystano pole tekstowe i przycisk z 2 komponentów materiałowych (MDC). Rozwińmy to teraz, dodając opcje nawigacji, strukturę i dane.
Co utworzysz
W ramach tego ćwiczenia w Codelabs utworzysz stronę główną aplikacji o nazwie Shrine – aplikacji e-commerce, która oferuje odzież i artykuły do domu. Będą one zawierać:
- Panel nawigacji
- Lista zdjęć pełna produktów
Komponenty internetowe MDC w tym ćwiczeniu z programowania
- Panel
- 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-101?
Jeśli masz ukończone MDC-101, Twój kod powinien być gotowy do wykonania tego ćwiczenia z programowania. Przejdź do kroku 3. Dodaj panel nawigacji.
Pobierz aplikację startową z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-102/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-102/starter
Instalowanie zależności projektu
Jako bieżący katalog powinien znajdować się material-components-web-codelabs/mdc-102/starter.. Następnie uruchom to polecenie:
npm install
Gdy pojawi się dużo działań, terminal powinien informować o pomyślnej instalacji:
Uruchamianie aplikacji startowej
W tym samym katalogu uruchom to polecenie:
npm start
Rozpocznie się webpack-dev-server. Aby wyświetlić tę stronę, wpisz w przeglądarce adres http://localhost:8080/.
Gotowe! Powinna wyświetlić się strona logowania do Shrine z ćwiczenia z programowania MDC-101.
Strona logowania wygląda już dobrze, więc teraz dodajmy do aplikacji kilka produktów. Wpisz prawidłową nazwę użytkownika i hasło, a następnie kliknij przycisk „Dalej”. , aby przejść do strony głównej.
3. Dodaj panel nawigacji
Po zalogowaniu się użytkownik zobaczy stronę główną z komunikatem „Udało Ci się!”. Wspaniale. Jednak teraz nasz użytkownik musi podjąć działania i zorientować się, gdzie się znajduje w aplikacji. Aby Ci w tym pomóc, dodajmy nawigację.
Wzorce nawigacji w stylu Material Design zapewniają wysoki stopień użyteczności. Panel nawigacji Material Design umożliwia nawigację i szybki dostęp do innych działań. Dodajmy jedną.
Instalowanie panelu i listy MDC
Aby zainstalować pakiety komponentu panelu, uruchom polecenie:
npm install @material/drawer @material/list
Dodaj kod HTML
W home.html zastąp tekst „Udało Ci się!” z tymi znacznikami dla panelu i znajdujących się w nim 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 usługi porównywania cen
W programie home.scss po obecnym imporcie dodaj te instrukcje:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
Na dole 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 teraz 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
Aplikacja ma już strukturę, więc uporządkujmy treści, umieszczając je na liście obrazów.
Zainstaluj listę obrazów MDC
Aby zainstalować pakiet komponentu z listą obrazów, uruchom polecenie:
npm install @material/image-list
Dodawanie kodu HTML do listy z jednym elementem
Zacznijmy od dodania listy obrazów obok panelu nawigacji. Listę zaczynamy od dodania pojedynczego elementu, który składa się z obrazu i etykiety tekstowej.
W polu home.html dodaj ten kod HTML po końcu elementu <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 będzie stosować style niestandardowe zarówno w tym samouczku, jak i w MDC-103.
Dodawanie usługi porównywania cen
Najpierw w elemencie home.scss dodaj import stylów komponentów listy obrazów po dotychczasowych importach:
@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;
}
Dzięki tym stylom lista obrazów ma wyświetlać obrazy w 4 kolumnach, dzięki czemu przewija się ona 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 na razie przejmować się niepowtarzalnymi obrazami ani tytułami. w MDC-103.
Odśwież. Teraz strona główna powinna wyglądać tak:
Na liście obrazów znajdują się 4 obrazy w wierszu, a ich rozmiar jest automatycznie dopasowywany do dostępnego miejsca 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. Dodając kilka linijek kodu, udało Ci się dodać panel i listę obrazów, by prezentować treści. Strona główna ma teraz podstawową strukturę i treści.
Dalsze kroki
Dzięki panelowi i liście obrazów udało Ci się wykorzystać 2 kolejne podstawowe komponenty stylu Material Design z biblioteki MDC Web. Więcej komponentów znajdziesz w katalogu internetowym MDC.
Mimo że jest w pełni funkcjonalna, strona główna nie przedstawia jeszcze konkretnej marki ani punktu widzenia. W poradniku MDC-103: Material Design Theming with Color, shape, Elevation and Type możesz dostosować styl tych komponentów, aby podkreślić barwną, nowoczesną markę.