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 |
Czym są interfejsy Material Design i Material Komponenty do wykorzystania w internecie?
Material Design to system do tworzenia odważnych i atrakcyjnych produktów cyfrowych. Łącząc styl, budowanie marki, interakcję i ruch w ramach spójnego zestawu zasad i komponentów, zespoły zajmujące się poszczególnymi produktami i usługami mogą w pełni wykorzystać swój potencjał projektowy.
Na komputerach i w internecie mobilnym rozwiązanie Material Komponenty Web (MDC Web) łączy projektowanie i inżynierię z biblioteką komponentów, aby zapewnić spójność w aplikacjach i na stronach. Komponenty MDC Web znajdują się w osobnych modułach węzłów, dlatego wraz z rozwojem systemu Material Design komponenty te można łatwo aktualizować, aby zapewnić spójną, idealną implementację i zgodność ze standardami Google dotyczącymi projektowania frontendu. Narzędzie MDC jest też dostępne na Androida, iOS i Flutter.
W ramach tego ćwiczenia w Codelabs utworzysz stronę logowania, korzystając z kilku komponentów MDC Web.
Co utworzysz
To pierwsze z 3 ćwiczeń w Codelabs, które poprowadzą Cię przez proces tworzenia aplikacji o nazwie Shrine – witryny e-commerce, która oferuje odzież i artykuły gospodarstwa domowego. Pokażemy też, jak dostosować komponenty tak, aby pasowały do dowolnej marki lub stylu przy użyciu MDC Web.
W ramach tego ćwiczenia w Codelabs utworzysz stronę logowania do Shrine, która zawiera:
- Dwa pola tekstowe, jedno na wpisanie nazwy użytkownika, a drugie na hasło.
- Dwa przyciski, jeden do „Anuluj” a drugi „Dalej”
- Nazwa witryny (świątynia)
- Obraz logo Shrine
Komponenty internetowe MDC w tym ćwiczeniu z programowania
- Pole tekstowe
- Przycisk
- Marszczenie
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
Cały czas staramy się ulepszać nasze samouczki. Jak oceniasz swój poziom doświadczenia w tworzeniu stron internetowych?
2. Konfigurowanie środowiska programistycznego
Pobierz aplikację startową z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-101/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-101/starter
Instalowanie zależności projektu
Z katalogu startowego uruchom polecenie:
npm install
Zobaczysz dużo aktywności, a na końcu terminala powinna pojawić się wiadomość o pomyślnej instalacji:
Jeśli nie, uruchom npm audit fix.
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 powinien być uruchomiony kod startowy strony logowania Shrine. Powinna być widoczna nazwa „Shrine”. i logo Shrine tuż pod nim.
Spójrz na kod
Metadane w tym regionie: index.html
W katalogu startowym otwórz plik index.html w ulubionym edytorze kodu. Powinien zawierać ten tekst:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
W tym przypadku do wczytania pliku bundle-login.css wygenerowanego przez pakiet internetowy używany jest tag <link>, a tag <script> zawiera plik bundle-login.js. Oprócz tego dodaliśmy plik normalize.css, by zapewnić spójne renderowanie w różnych przeglądarkach, oraz czcionkę Roboto z Google Fonts.
Style niestandardowe w: login.scss
Style komponentów sieciowych MDC są określane przy użyciu klas CSS mdc-*, takich jak klasa mdc-text-field. (MDC Web traktuje swoją strukturę DOM jako część publicznego interfejsu API).
Ogólnie zalecamy modyfikowanie stylów komponentów za pomocą własnych klas. W powyższym kodzie HTML udało się zauważyć niestandardowe klasy CSS, takie jak shrine-logo. Te style są zdefiniowane w login.scss, aby dodać do strony style podstawowe.
Otwórz login.scss. Zobaczysz następujące style strony logowania:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Teraz, gdy znasz już kod startowy, zaimplementujmy nasz pierwszy komponent.
3. Dodaj pola tekstowe
Na początek dodamy do naszej strony logowania dwa pola tekstowe, w których użytkownicy będą mogli wpisać swoją nazwę użytkownika i hasło. Skorzystamy z komponentu Pole tekstowe MDC, który zawiera wbudowaną funkcję wyświetlania etykiety pływającej i aktywujące fale dotykowe.
Zainstaluj pole tekstowe MDC.
Komponenty internetowe MDC są publikowane za pomocą pakietów NPM. Aby zainstalować pakiet komponentu pola tekstowego, uruchom polecenie:
npm install @material/textfield@^6.0.0
Dodaj kod HTML
W polu index.html w elemencie <form> w treści dodaj ten kod:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
Struktura DOM pola tekstowego MDC składa się z kilku części:
- Główny element,
mdc-text-field - Podelementy
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelimdc-line-ripple
Dodawanie usługi porównywania cen
W pliku login.scss po obecnym imporcie dodaj tę deklarację:
@import "@material/textfield/mdc-text-field";
W tym samym pliku dodaj te style, aby wyrównać i wyśrodkować pola tekstowe:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
Dodawanie kodu JavaScript
Otwórz plik login.js, który jest obecnie pusty. Dodaj następujący kod, aby zaimportować i utworzyć wystąpienie pól tekstowych:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
Dodawanie weryfikacji HTML5
Pola tekstowe pokazują, czy dane wejściowe w polu są prawidłowe lub zawierają błąd, dzięki atrybutom dostarczonych przez interfejs API do weryfikacji formularza HTML5.
Wykonaj wtedy te czynności:
- Dodaj atrybut
requireddo elementówmdc-text-field__inputw polach tekstowych Username (Nazwa użytkownika) i Password (Hasło) - Ustaw atrybut
minlengthelementumdc-text-field__inputw polu tekstowym Password na"8"
Dostosuj 2 elementy <label class="mdc-text-field mdc-text-field--filled"> tak:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
Odśwież stronę http://localhost:8080/. Powinna wyświetlić się strona z 2 polami tekstowymi: Nazwa użytkownika i Hasło.
Kliknij pola tekstowe, aby zobaczyć animację etykiety pływającej i fali falującej (dolnej linii obramowania, która przesuwa się na zewnątrz):
4. Dodaj przyciski
Następnie dodamy do naszej strony logowania dwa przyciski: „Anuluj” i „Dalej”. Wykorzystamy komponent przycisku MDC oraz komponent MDC Ripple, aby uzyskać efekt fali atramentu w stylu Material Design.
Przycisk Zainstaluj MDC
Aby zainstalować pakiet komponentu przycisku, uruchom polecenie:
npm install @material/button@^6.0.0
Dodaj kod HTML
W polu index.html pod tagiem zamykającym elementu <label class="mdc-text-field mdc-text-field--filled password"> dodaj:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
W polu „Anuluj” używany jest domyślny styl przycisku. Opcja „Dalej” przycisk korzysta z wariantu stylu raised, co jest wskazywane przez klasę mdc-button--raised.
Aby później łatwo je wyrównać, umieszczamy 2 elementy mdc-button w elemencie <div>.
Dodawanie usługi porównywania cen
W sekcji login.scss po importowaniu dodaj tę deklarację:
@import "@material/button/mdc-button";
Aby wyrównać przyciski i dodać do nich margines, dodaj do elementu login.scss te style:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
Dodawanie fal atramentowych do przycisków
Gdy użytkownik dotknie przycisku, powinien wyświetlić się komentarz w postaci fali atramentu. Komponent Echa pisma odręcznego wymaga JavaScriptu, więc dodamy go do strony.
Aby zainstalować pakiet komponentu Echo, uruchom:
npm install @material/ripple@^6.0.0
Na górze login.js dodaj tę deklarację dotyczącą importu:
import {MDCRipple} from '@material/ripple';
Aby utworzyć wystąpienie echa, do login.js dodaj:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Nie musimy zachowywać odniesienia do wystąpienia Echa, więc nie trzeba go przypisywać do zmiennej.
Znakomicie. Odśwież stronę. Po kliknięciu każdego przycisku pojawi się fala atramentu.
Wpisz prawidłowe wartości w polach tekstowych i kliknij „DALEJ”. Przycisk Udało się! Dalej będziesz pracować na tej stronie w wersji MDC-102.
5. Podsumowanie
Wykorzystując podstawowe znaczniki HTML oraz zaledwie kilka wierszy kodu CSS i JavaScript, komponenty Material Komponenty do biblioteki internetowej pomogły Ci stworzyć piękną stronę logowania, która jest zgodna z wytycznymi Material Design oraz wygląda i działa spójnie na wszystkich urządzeniach.
Dalsze kroki
Pole tekstowe, przycisk i Echo to 3 główne komponenty biblioteki internetowej MDC, ale jest ich znacznie więcej. Możesz też zapoznać się z pozostałymi komponentami w MDC Web.
Przejdź do artykułu MDC-102: Material Design Structured and Layout, aby dowiedzieć się więcej o panelu nawigacji i liście obrazów. Dziękujemy za wypróbowanie narzędzia Material Komponenty. Mamy nadzieję, że to ćwiczenie z programowania Ci się podobało.