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 samouczku MDC-101 do utworzenia interfejsu strony logowania użyto 2 komponentów Material Design (MDC): pola tekstowego i przycisku. Teraz rozbudujmy tę stronę, dodając nawigację, strukturę i dane.
Co utworzysz
W tym ćwiczeniu w Codelabs utworzysz stronę główną aplikacji Shrine, czyli aplikacji do handlu elektronicznego, w której sprzedawane są ubrania i artykuły gospodarstwa domowego. Będzie ona zawierać:
- panel nawigacji,
- Lista obrazów pełna produktów
Komponenty MDC Web w tym kursie
- 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 znajomość języków HTML, CSS i JavaScript
Jak oceniasz swój poziom doświadczenia w zakresie tworzenia stron internetowych?
Kontynuujesz naukę z MDC-101?
Jeśli masz już za sobą MDC-101, Twój kod powinien być gotowy do tego ćwiczenia. Przejdź do kroku 3. Dodaj panel nawigacyjny.
Pobieranie aplikacji do ćwiczeń z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-102/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-102/starter
Instalowanie zależności projektu
Bieżący katalog powinien mieć nazwę material-components-web-codelabs/mdc-102/starter.. Uruchom w nim to polecenie:
npm install
Po pojawieniu się wielu działań terminal powinien wyświetlić komunikat o pomyślnej instalacji:
Uruchom aplikację startową
W tym samym katalogu uruchom to polecenie:
npm start
Rozpocznie się webpack-dev-server. Aby wyświetlić stronę, otwórz w przeglądarce adres http://localhost:8080/.
Gotowe! Powinna wyświetlić się strona logowania Shrine z ćwiczenia MDC-101.
Strona logowania wygląda już dobrze, więc teraz wypełnimy aplikację produktami. Wpisz prawidłową nazwę użytkownika i hasło, a potem kliknij przycisk „Dalej”, aby przejść na stronę główną.
Gdy użytkownik się zaloguje, pojawi się strona główna z komunikatem „Udało Ci się!”. Wspaniale. Teraz jednak użytkownik potrzebuje działań, które może wykonać, oraz informacji o tym, gdzie znajduje się w aplikacji. Aby mu to ułatwić, dodajmy nawigację.
Wzorce nawigacji Material Design zapewniają wysoki poziom użyteczności. Panel nawigacji Material Design zapewnia nawigację i szybki dostęp do innych działań. Dodajmy go.
Instalowanie komponentów MDC Drawer i List
Aby zainstalować pakiety komponentu szuflady, uruchom polecenie:
npm install @material/drawer @material/list
Dodaj kod HTML
W pliku home.html zastąp tekst „You did it!” (Udało się!) tym kodem, aby utworzyć panel i jego elementy:
<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 te instrukcje importu po istniejącej instrukcji importu:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";U dołu pliku 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 zapewnić prawidłową nawigację za pomocą klawiatury, musimy utworzyć instancję MDC List w szufladzie nawigacyjnej. 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ę pod adresem http://localhost:8080/home.html. Twoja strona główna powinna teraz wyglądać tak:
Na stronie głównej znajduje się teraz wysuwane menu nawigacyjne z różnymi elementami nawigacyjnymi, z których pierwszy jest aktywny.
Aplikacja ma już pewną strukturę, więc uporządkujmy treści, umieszczając je na liście obrazów.
Instalowanie listy obrazów MDC
Aby zainstalować pakiet komponentu listy obrazów, uruchom to polecenie:
npm install @material/image-list
Dodaj kod HTML listy z 1 elementem
Zacznijmy od dodania listy obrazów obok panelu nawigacyjnego. Zaczniemy od dodania do listy pojedynczego elementu, który składa się z obrazu i etykiety tekstowej.
W pliku home.html dodaj ten kod HTML po zakończeniu 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ć niestandardowe style zarówno w tym samouczku, jak i w MDC-103.
Dodawanie kodu CSS
Najpierw w pliku home.scss dodaj instrukcję importu stylów komponentu listy obrazów po istniejących instrukcjach importu:
@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 powodują, że lista obrazów wyświetla obrazy w 4 kolumnach, dzięki czemu 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, więc dodajmy więcej obrazów, aby lepiej zobaczyć, jak działa ten 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 15 razy po istniejącym elemencie (przed tagiem zamykającym </ul>). Łącznie otrzymasz 16 obrazów. Nie martw się jeszcze o unikalne obrazy i tytuły. Zajmiemy się nimi w module MDC-103.
Odśwież. Teraz strona główna powinna wyglądać tak:
Lista obrazów wyświetla 4 obrazy w rzędzie, a rozmiar obrazów jest automatycznie dostosowywany do dostępnej przestrzeni na ekranie.
Witryna ma podstawowy przepływ, który prowadzi użytkownika od strony logowania do strony głównej, na której można wyświetlać produkty. W kilku linijkach kodu dodaliśmy panel i listę obrazów, aby prezentować treści. Strona główna ma teraz podstawową strukturę i zawartość.
Dalsze kroki
Dzięki szufladzie i liście obrazów używasz teraz 2 kolejnych podstawowych komponentów Material Design z biblioteki MDC Web. Więcej komponentów znajdziesz w katalogu MDC Web.
Chociaż jest w pełni funkcjonalna, strona główna nie wyraża jeszcze żadnej konkretnej marki ani punktu widzenia. W module MDC-103: Material Design Theming with Color, Shape, Elevation and Type (MDC-103: motywy Material Design z kolorami, kształtami, poziomami i typami) dostosujesz styl tych komponentów, aby wyrazić żywą, nowoczesną markę.