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 |
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 animacje 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 interfejsu. MDC jest też dostępny na Android, iOS i Flutterze.
W tym module nauczysz się tworzyć 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 Shrine, czyli witryny e-commerce sprzedającej odzież i artykuły gospodarstwa domowego. Dowiesz się z niego, jak dostosowywać komponenty, aby odzwierciedlały dowolną markę lub styl przy użyciu 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 tym kursie
- 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
Stale staramy się ulepszać nasze samouczki. Jak oceniasz swój poziom doświadczenia w zakresie tworzenia stron internetowych?
Pobieranie aplikacji do ćwiczeń z programowania
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 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-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 początkowy 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, oraz 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 wprowadzanie niestandardowych modyfikacji stylu komponentów 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 początkowy, więc teraz zaimplementujmy pierwszy komponent.
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 ma 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
Dodaj kod HTML
W sekcji index.html dodaj w elemencie <form> w treści te informacje:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>Struktura DOM pola tekstowego MDC składa się z kilku części:
- Element główny,
mdc-text-field - Elementy podrzędne
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: block;
width: 300px;
margin: 20px auto;
}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 wpisane w nich dane są prawidłowe lub zawierają 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 <div class="mdc-text-field">, aby wyglądały tak:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>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):
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 polecenie:
npm install @material/button
Dodaj kod HTML
W sekcji index.html dodaj ten kod poniżej tagu zamykającego elementu <div class="mdc-text-field 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 fali atramentu do przycisków
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 ripple, uruchom to polecenie:
npm install @material/ripple
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'));Nie musimy zachowywać odniesienia do instancji efektu fali, więc nie musimy przypisywać jej do zmiennej.
Znakomicie. 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 MDC-102.
Korzystając z podstawowego znacznika HTML i 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 menu nawigacyjnym 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 te ćwiczenia z programowania były przydatne.