1. Wprowadzenie
Komponenty Material Design (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 |
Komponenty Material Design na potrzeby internetu (MDC Web) są niezależne od platformy i zbudowane przy użyciu zwykłego kodu JavaScript. Dzięki temu MDC Web będzie bezproblemowo współpracować z Twoim procesem programowania. Te komponenty można instalować w razie potrzeby, aby wprowadzać w istniejącej aplikacji ulepszenia w ramach metodyki Agile.
Co utworzysz
W tym ćwiczeniu z programowania zastąpisz niektóre komponenty w formularzu komponentami udostępnianymi przez MDC Web:
Komponenty MDC Web w tym ćwiczeniu
- Przycisk
- Wybierz
- Pole tekstowe
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?
2. Konfigurowanie środowiska programistycznego
Pobierz aplikację do ćwiczeń z programowania
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-111/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-111/starter
Instalowanie zależności projektu
W katalogu początkowym (material-components-web-codelabs/mdc-111/starter) uruchom:
npm install
Zobaczysz wiele działań, a na końcu w terminalu powinien pojawić się komunikat o pomyślnej instalacji:
Uruchom aplikację startową
W katalogu początkowym uruchom:
npm start
Rozpocznie się webpack-dev-server. Aby wyświetlić stronę, otwórz w przeglądarce adres http://localhost:8080/.
Gotowe! Powinien pojawić się formularz adresu dostawy aplikacji:
3. Aktualizowanie przycisku
Zainstaluj przycisk MDC
Naciśnij Ctrl+C, aby zamknąć serwer programistyczny. Następnie zainstaluj pakiet NPM MDC Button i uruchom ponownie serwer:
npm install @material/button npm start
Importowanie usługi porównywania cen
U góry _theme.scss usuń blok .crane-button { ... } i dodaj w jego miejsce ten kod:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Zaktualizuj kod
W pliku index.html usuń klasę crane-button z elementu <button>, dodaj klasy mdc-button i mdc-button--raised oraz zagnieź etykietę w elemencie <span> z klasą mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Dodawanie efektu fali
Przycisków MDC można używać bez JavaScriptu. Dodanie interaktywnego efektu fali do przycisku zwiększa jednak komfort użytkownika.
Naciśnij Ctrl+C, aby zamknąć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/ripple npm start
U góry pliku app.js dodaj tę instrukcję importu:
import {MDCRipple} from '@material/ripple';
Aby utworzyć efekt fali na przycisku, dodaj u dołu funkcji app.js ten kod:
new MDCRipple(document.querySelector('.mdc-button'));
Importowanie czcionki Roboto
Domyślnie Material Design używa czcionki Roboto w przypadku komponentów.
W pliku index.html zaimportuj czcionkę Roboto Web, dodając ten kod do elementu <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Załaduj ponownie stronę. Powinien pojawić się ekran podobny do tego:
Po naciśnięciu przycisku pojawia się subtelny efekt fali, który jest wizualną informacją zwrotną.
4. Aktualizowanie elementu select
Komponent MDC Select opakowuje natywny element HTML <select>. Używaj go wszędzie tam, gdzie zwykle używasz <select>. Zaktualizujmy pole „State”.
Instalowanie modułu MDC Node
Naciśnij Ctrl+C, aby zamknąć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/select npm start
Importowanie usługi porównywania cen
Dodaj do pliku _theme.scss ten kod tuż po instrukcji importu przycisku:
@import "@material/select/mdc-select";
Aktualizowanie znaczników
Znajdź element <select> w index.html. Zastąp klasę crane-input klasą mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Bezpośrednio nad tagiem <select> dodaj następujące znaczniki dla strzałki w dół komponentu MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Tuż pod zamykającym tagiem </select> zastąp klasę crane-label klasą mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Następnie dodaj następujące znaczniki bezpośrednio po etykiecie:
<div class="mdc-line-ripple"></div>
Na koniec dodaj te tagi wokół elementu <select> (ale w elemencie crane-field):
<div class="mdc-select">
...
</div>
Wynikowy kod powinien wyglądać tak:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Importowanie kodu JavaScript
U góry pliku app.js dodaj tę instrukcję importu:
import {MDCSelect} from '@material/select';
Aby utworzyć instancję elementu select, dodaj ten kod na końcu pliku app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Załaduj ponownie stronę, która powinna teraz wyglądać tak:
Komponent MDC Select wyświetla listę opcji w znanym formacie, ale z nowoczesnym stylem.
5. Zaktualizuj pola tekstowe.
Pola tekstowe Material Design są znacznie bardziej użyteczne niż zwykłe elementy <input>. Są zaprojektowane tak, aby można je było łatwo zidentyfikować w skomplikowanych treściach, i wyświetlają subtelne wizualne informacje zwrotne, gdy użytkownik wchodzi z nimi w interakcję.
Instalowanie modułu MDC Node
Naciśnij Ctrl+C, aby zamknąć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/textfield npm start
Dodawanie kodu CSS
Dodaj do pliku _theme.scss ten kod tuż po instrukcji importu:
@import "@material/textfield/mdc-text-field";
Zaktualizuj kod
W pliku index.html znajdź element <input> w polu „Name”. Zastąp klasę crane-input klasą mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Następnie zastąp klasę crane-label klasą mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Następnie dodaj następujące znaczniki bezpośrednio po etykiecie:
<div class="mdc-line-ripple"></div>
Na koniec umieść wszystkie 3 elementy w tym kodzie:
<div class="mdc-text-field">
...
</div>
Wynikowy kod powinien wyglądać tak:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Powtórz tę samą procedurę w przypadku wszystkich pozostałych elementów <input> na stronie.
Znaczniki pól „Adres”, „Miasto” i „Kod pocztowy” powinny wyglądać tak:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Możesz teraz usunąć style .crane-label i .crane-input z _theme.scss, które nie są już używane.
Importowanie kodu JavaScript
U góry pliku app.js dodaj tę instrukcję importu:
import {MDCTextField} from '@material/textfield';
Aby utworzyć instancje pól tekstowych, dodaj na końcu pliku app.js ten kod:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Załaduj ponownie stronę, która powinna teraz wyglądać tak:
Wszystkie pola tekstowe zostały zaktualizowane, aby korzystać z Material Theming.
6. Podsumowanie
Zastąpiono niektóre typowe komponenty (pola tekstowe, wybór i przycisk) bez przeprojektowywania całej aplikacji. Świetna robota!
Inne komponenty, które również mogą mieć duże znaczenie, to górny pasek aplikacji i menu nawigacyjne.
Dalsze kroki
Więcej komponentów MDC Web znajdziesz w katalogu MDC Web.
Jeśli chcesz używać MDC Web z określonym frameworkiem, zapoznaj się z artykułem MDC-112: integracja MDC z platformami do tworzenia aplikacji internetowych.