1. Wprowadzenie
Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC zostało stworzone przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu, które są dostępne na platformach Android, iOS, internetowej i Flutter.material.io/develop |
Czym są Material Design i Material Components for the Web?
Material Design to system tworzenia atrakcyjnych i funkcjonalnych produktów cyfrowych. Łącząc styl, branding, interakcje i ruch w spójny zestaw zasad i komponentów, zespoły produktowe mogą w pełni wykorzystać swój potencjał projektowy.
W przypadku komputerów i internetu mobilnego Material Components Web (MDC Web) łączy projektowanie i inżynierię z biblioteką komponentów, aby zapewnić spójność aplikacji i witryn. Każdy komponent MDC Web znajduje się w osobnym module węzła, dzięki czemu w miarę rozwoju systemu Material Design można je łatwo aktualizować, aby zapewnić spójną implementację z dokładnością do piksela i zgodność ze standardami Google dotyczącymi tworzenia interfejsów. MDC jest też dostępny na Android, iOS i Flutterze.
W tym ćwiczeniu utworzysz stronę logowania za pomocą kilku komponentów MDC Web.
Co utworzysz
Te warsztaty to pierwsze z trzech, które przeprowadzą Cię przez proces tworzenia aplikacji o nazwie Shrine, czyli witryny e-commerce sprzedającej odzież i artykuły gospodarstwa domowego. Dowiesz się z niego, jak dostosowywać komponenty do dowolnej marki lub stylu za pomocą MDC Web.
W tym ćwiczeniu utworzysz stronę logowania do aplikacji Shrine, która będzie zawierać:
- Dwa pola tekstowe: jedno do wpisania nazwy użytkownika, a drugie do wpisania hasła.
- 2 przyciski: „Anuluj” i „Dalej”.
- Nazwa witryny (Shrine)
- Obraz logo Shrine
Komponenty MDC Web w tych ćwiczeniach
- Pole tekstowe
- Przycisk
- Marszczenie
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
Cały czas staramy się ulepszać nasze samouczki. Jak oceniasz swój poziom doświadczenia w zakresie tworzenia stron internetowych?
2. Konfigurowanie środowiska programistycznego
Pobierz aplikację Codelabs
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-101/starter. Zanim zaczniesz, cd do tego katalogu.
...lub sklonuj go z GitHub
Aby skopiować ten codelab 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
W katalogu początkowym uruchom:
npm install
Zobaczysz wiele działań, a na końcu w terminalu powinien pojawić się komunikat o pomyślnej instalacji:
Jeśli tak nie jest, uruchom npm audit fix.
Uruchom aplikację startową
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! Kod startowy strony logowania Shrine powinien być uruchomiony w przeglądarce. Powinna się wyświetlić nazwa „Shrine” i logo Shrine tuż pod nią.
Sprawdź kod
Metadane w regionie index.html
W katalogu początkowym otwórz plik index.html w ulubionym edytorze kodu. Powinien zawierać te informacje:
<!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 tag <link> służy do wczytywania pliku bundle-login.css wygenerowanego przez webpack, a tag <script> zawiera plik bundle-login.js. Dodatkowo dołączamy normalize.css, aby zapewnić spójne renderowanie w różnych przeglądarkach, a także czcionkę Roboto z Google Fonts.
Style niestandardowe w: login.scss
Komponenty MDC Web są stylizowane za pomocą klas CSS mdc-*, np. klasy mdc-text-field. (MDC Web traktuje swoją strukturę DOM jako część publicznego interfejsu API).
Ogólnie zalecamy, aby modyfikacje stylu niestandardowego komponentów wprowadzać za pomocą własnych klas. W powyższym kodzie HTML możesz zauważyć niestandardowe klasy CSS, takie jak shrine-logo. Te style są zdefiniowane w login.scss, aby dodać do strony podstawowe style.
Otwórz login.scss, a na stronie logowania zobaczysz te style:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Znasz już kod startowy, więc teraz zaimplementujmy pierwszy komponent.
3. Dodawanie pól tekstowych
Na początek dodamy do strony logowania 2 pola tekstowe, w których użytkownicy będą mogli wpisać nazwę użytkownika i hasło. Użyjemy komponentu MDC Text Field, który zawiera wbudowaną funkcję wyświetlania pływającej etykiety i aktywowania efektu fali po dotknięciu.
Zainstaluj pole tekstowe MDC
Komponenty MDC Web są publikowane w pakietach NPM. Aby zainstalować pakiet komponentu pola tekstowego, uruchom to polecenie:
npm install @material/textfield@^6.0.0
Dodaj kod HTML
W sekcji index.html dodaj w elemencie <form> w treści te informacje:
<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:
- Element główny,
mdc-text-field - Elementy podrzędne
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelimdc-line-ripple
Dodawanie kodu CSS
W pliku login.scss dodaj po istniejącej instrukcji importu tę instrukcję:
@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 login.js, który jest obecnie pusty. Dodaj ten kod, aby zaimportować i utworzyć instancję 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 informują, czy wprowadzona wartość jest prawidłowa, czy zawiera błąd, za pomocą atrybutów udostępnianych przez interfejs HTML5 API do weryfikacji formularzy.
Wykonaj wtedy te czynności:
- Dodaj atrybut
requireddo elementówmdc-text-field__inputw polach tekstowych Nazwa użytkownika i Hasło. - Ustaw atrybut
minlengthelementumdc-text-field__inputw polu tekstowym Hasło na"8".
Dostosuj 2 elementy <label class="mdc-text-field mdc-text-field--filled">, aby wyglądały 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ę pod adresem http://localhost:8080/. Powinna się teraz wyświetlić strona z 2 polami tekstowymi: Nazwa użytkownika i Hasło.
Kliknij pola tekstowe, aby zobaczyć animację etykiety pływającej i animację linii falującej (dolna linia obramowania, która faluje na zewnątrz):
4. Dodawanie przycisków
Następnie dodamy do strony logowania 2 przyciski: „Anuluj” i „Dalej”. Aby uzyskać charakterystyczny efekt fali atramentu Material Design, użyjemy komponentu MDC Button wraz z komponentem MDC Ripple.
Zainstaluj przycisk MDC
Aby zainstalować pakiet komponentu przycisku, uruchom to polecenie:
npm install @material/button@^6.0.0
Dodaj kod HTML
W sekcji index.html dodaj ten kod poniżej tagu zamykającego elementu <label class="mdc-text-field mdc-text-field--filled password">:
<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 przypadku przycisku „Anuluj” używamy domyślnego stylu przycisku. Przycisk „Dalej” używa jednak wariantu stylu podniesionego, co jest oznaczone klasą mdc-button--raised.
Aby później łatwo je wyrównać, umieszczamy oba elementy mdc-button w elemencie <div>.
Dodawanie kodu CSS
W pliku login.scss dodaj po dotychczasowych instrukcjach importu tę instrukcję:
@import "@material/button/mdc-button";
Aby wyrównać przyciski i dodać wokół 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 efektu rozchodzenia się atramentu na przyciskach
Gdy użytkownik dotknie lub kliknie przycisk, powinien zobaczyć efekt w postaci rozchodzącej się fali. Komponent efektu rozchodzenia się atramentu wymaga JavaScriptu, więc dodamy go do strony.
Aby zainstalować pakiet komponentu efektu fali, uruchom to polecenie:
npm install @material/ripple@^6.0.0
U góry pliku login.js dodaj tę instrukcję importu:
import {MDCRipple} from '@material/ripple';
Aby utworzyć instancję efektu falowania, dodaj do login.js ten kod:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Ponieważ nie musimy zachowywać odniesienia do instancji efektu fali, nie ma potrzeby przypisywania jej do zmiennej.
To wszystko. Odśwież stronę. Po kliknięciu każdego przycisku pojawi się efekt rozchodzącego się atramentu.
Wypełnij pola tekstowe prawidłowymi wartościami i kliknij przycisk „DALEJ”. Udało się! Dalsze działania na tej stronie będziesz wykonywać w module MDC-102.
5. Podsumowanie
Korzystając z podstawowego znacznika HTML oraz zaledwie kilku wierszy kodu CSS i JavaScript, biblioteka Material Components for the web pomogła Ci utworzyć atrakcyjną stronę logowania zgodną z wytycznymi Material Design, która wygląda i działa spójnie na wszystkich urządzeniach.
Dalsze kroki
Pola tekstowe, przyciski i efekty falowania to 3 podstawowe komponenty w bibliotece MDC Web, ale jest ich znacznie więcej. Możesz też zapoznać się z pozostałymi komponentami w MDC Web.
Więcej informacji o panelu nawigacji i liście obrazów znajdziesz w MDC-102: Material Design Structure and Layout. Dziękujemy za wypróbowanie komponentów Material. Mamy nadzieję, że to ćwiczenie było dla Ciebie przydatne.