Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. Firma MDC została stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera ona dziesiątki pięknych i funkcjonalnych elementów interfejsu oraz jest dostępna w aplikacjach na Androida, iOS, internet oraz Flutter. material.io/develop |
W laboratorium MDC-101 do utworzenia interfejsu użytkownika strony logowania zostały użyte 2 komponenty Material Design: pole tekstowe i przycisk. Rozwińmy teraz ten obszar, dodając elementy nawigacyjne, strukturę i dane.
Co stworzysz
W tym ćwiczeniu utworzysz stronę główną aplikacji o nazwie Shrine – aplikacji handlu elektronicznego, która sprzedaje odzież i wyposażenie domu. Tabela zawiera:
- Panel nawigacji
- Lista zdjęć z produktami
Komponenty MDC Web w tym ćwiczeniu z programowania
- Panel
- 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 wiedza o HTML, CSS i JavaScript
Jak oceniasz swoje doświadczenie w tworzeniu stron internetowych?
Kontynuujesz z MDC-101?
Jeśli ukończyłeś MDC-101, Twój kod powinien być przygotowany do tych ćwiczeń z programowania. Przejdź do kroku 3. Dodaj panel nawigacji.
Pobierz aplikację początkujących z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-102/starter. Pamiętaj, aby przed wykonaniem czynności umieścić w cd katalog.
...lub skopiuj z GitHuba
Aby skopiować to ćwiczenia z programowania na GitHubie, uruchom następujące 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 mieć postać material-components-web-codelabs/mdc-102/starter.. Następnie uruchom to polecenie:
npm install
Gdy pojawi się duża liczba aktywności, terminal powinien wyświetlać udaną instalację:
Uruchamianie aplikacji startowej
W tym samym katalogu uruchom to polecenie:
npm start
Uruchomi się webpack-dev-server. Otwórz w przeglądarce adres http://localhost:8080/, aby wyświetlić stronę.
Gotowe. Powinna wyświetlić się strona logowania się do świątyni z ćwiczenia z programowania MDC-101.
Strona logowania wygląda dobrze, więc dodajmy do aplikacji produkty. Wpisz prawidłową nazwę użytkownika i hasło, a następnie kliknij przycisk &Dalej, aby przejść do strony głównej.
Gdy użytkownik się zaloguje, wyświetli się strona główna z komunikatem „Udało się!”. Wspaniale. Teraz użytkownik potrzebuje jednak działań, aby określić, gdzie się znajduje w aplikacji. Aby mu w tym pomóc, dodaj nawigację.
Wzorce nawigacji w stylu Material Design dają wysoki poziom łatwości obsługi. Panel Material Design umożliwia nawigację i szybki dostęp do innych działań. Dodajmy.
Instalowanie szuflady i listy w MDC
Aby zainstalować pakiety komponentu panelu, uruchom polecenie:
npm install @material/drawer @material/list
Dodawanie kodu HTML
W polu home.html zastąp &"Udało się!
<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 home.scss dodaj te instrukcje importu po istniejącym importu:
@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 JavaScriptu
Aby utworzyć prawidłową nawigację za pomocą klawiatury, musisz utworzyć listę MDC w panelu nawigacji. Otwórz home.js, który obecnie jest pusty, i dodaj ten kod:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));Odśwież stronę na stronie http://localhost:8080/home.html. Twoja strona główna powinna teraz wyglądać tak:
Strona główna ma stałą szufladę nawigacji z różnymi elementami nawigacji i pierwszym aktywnym elementem.
Teraz, gdy aplikacja ma już określoną strukturę, umieść ją na liście obrazów.
Zainstaluj listę obrazów MDC
Aby zainstalować pakiet dla komponentu listy obrazów, uruchom polecenie:
npm install @material/image-list
Dodawanie kodu HTML do listy z jednym elementem
Zacznijmy od dodania listy zdjęć obok panelu nawigacji. Rozpoczniemy od dodania listy, która składa się z obrazu i etykiety tekstowej.
W home.html dodaj na końcu elementu <aside> ten kod HTML:
<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 home.scss dodaj import stylów stylu listy obrazów po przeprowadzeniu istniejących importów:
@import "@material/image-list/mdc-image-list";Następnie dodaj te style po początkowych stylach strony głównej:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}Te style służą do wyświetlania listy obrazów w 4 kolumnach, dzięki czemu lista obrazów przewija się niezależnie od panelu.
Odśwież stronę. Strona główna powinna teraz wyglądać tak:
Lista obrazów ma na celu wyświetlanie wielu obrazów w kolekcji, więc dodajmy więcej obrazów, żeby lepiej widzieć, jak działa komponent.
W 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 po istniejącym elemencie (przed tagiem </ul>) 15 razy. Łącznie daje to 16 obrazów. Nie musisz jeszcze martwić się o unikalne obrazy i tytuły – dotrzesz do nich w MDC-103.
Odśwież. Strona główna powinna wyglądać tak:
Na liście obrazów znajdują się cztery obrazy w wierszu, których rozmiar jest automatycznie dopasowywany do dostępnego miejsca na ekranie.
Twoja witryna ma proces podstawowy, który przenosi użytkownika ze strony logowania na stronę główną, na której mogą wyświetlić produkty. W kilku wierszach kodu dodaliśmy szufladę i listę obrazów do prezentowania treści. Strona główna ma teraz podstawową strukturę i treści.
Dalsze kroki
Dzięki liście w panelu i obrazie używasz jeszcze 2 podstawowych komponentów Material Design z biblioteki MDC Web. Więcej komponentów znajdziesz w katalogu internetowym MDC.
Strona główna w pełni funkcjonuje, ale jeszcze nie wyraża konkretnej marki ani punktu widzenia. W filmie MDC-103: Material Design Theme with Color, kształt, wysokość i typ możesz dostosować styl tych komponentów, aby wyrazić nowoczesną i nowoczesną markę.