1. Wprowadzenie
Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. MDC to biblioteka stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki pięknych i funkcjonalnych komponentów UI. Jest dostępna na Androida, iOS, web i Flutter.material.io/develop |
Komponenty Material Design na potrzeby internetu (MDC Web) są niezależne od platformy i stworzone przy użyciu zwykłego kodu JavaScript. Dzięki temu MDC Web będzie płynnie współpracować z Twoim procesem tworzenia aplikacji. W razie potrzeby możesz zainstalować te komponenty, aby ułatwić elastyczny projekt aplikacji.
Co utworzysz
W ramach tego ćwiczenia w Codelabs zastąpisz niektóre istniejące komponenty w formularzu tymi dostarczonymi przez MDC Web:
Komponenty MDC Web w tym kursie programowania
- Przycisk
- Wybierz
- Pole tekstowe
Czego potrzebujesz
- najnowsza wersja Node.js (dołączona do npm, menedżera 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 tworzeniu stron internetowych?
2. Konfigurowanie środowiska programistycznego
Pobierz aplikację Codelab dla początkujących
Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-111/starter. Zanim zaczniesz, pamiętaj, by cd w tym katalogu.
...lub sklonuj je z GitHuba
Aby skopiować to laboratorium programistyczne 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 startowym (material-components-web-codelabs/mdc-111/starter) uruchom:
npm install
W terminalu zobaczysz wiele aktywności, a na koniec komunikat o udanej instalacji:
Uruchamianie aplikacji startowej
W katalogu startowym uruchom polecenie:
npm start
Rozpocznie się webpack-dev-server. Aby wyświetlić tę stronę, wpisz w przeglądarce adres http://localhost:8080/.
Gotowe! Powinien wyświetlić się formularz adresu dostawy w aplikacji:
3. Zaktualizuj przycisk
Przycisk Zainstaluj MDC
Aby zatrzymać serwer programistyczny, naciśnij Ctrl + C. Następnie zainstaluj pakiet NPM przycisku MDC i uruchom ponownie serwer:
npm install @material/button npm start
Importowanie usługi porównywania cen
Na górze elementu _theme.scss usuń bryłę .crane-button { ... } i w jej miejsce dodaj:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Aktualizowanie znaczników
W index.html usuń klasę crane-button z elementu <button>, dodaj klasy mdc-button i mdc-button--raised oraz zagnieźdź 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 falowania
Przyciski MDC można używać bez JavaScriptu. Dodanie do przycisku interaktywnej fali powoduje jednak, że użytkownik ma lepsze wrażenia.
Naciśnij Ctrl + C, aby zatrzymać serwer programistyczny. Następnie uruchom:
npm install @material/ripple npm start
Na górze app.js dodaj instrukcję importu:
import {MDCRipple} from '@material/ripple';
Aby utworzyć instancję efektu falowania na przycisku, dodaj do elementu app.js ten kod:
new MDCRipple(document.querySelector('.mdc-button'));
Importuj czcionkę Roboto
Domyślnie w Material Design w przypadku czcionek komponentów jest używany krój Roboto.
W programie index.html zaimportuj czcionkę Roboto Web, dodając do elementu <head> ten fragment:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Załaduj stronę ponownie. Powinno wyświetlić się mniej więcej coś takiego:
Po naciśnięciu przycisk wyświetla teraz subtelny efekt falowania jako wizualny sygnał zwrotny.
4. Zaktualizuj wybór elementu
Komponent MDC Select opakowuje natywny element HTML <select>. Korzystaj z niej wszędzie tam, gdzie zwykle używasz karty <select>. Zmieńmy pole „Stan”.
Zainstaluj moduł węzła MDC
Naciśnij Ctrl + C, aby zatrzymać serwer programistyczny. Następnie uruchom:
npm install @material/select npm start
Importowanie kodu CSS
Dodaj do pliku _theme.scss te instrukcje importu, tuż po importowaniu przycisku:
@import "@material/select/mdc-select";
Aktualizowanie znaczników
Znajdź element <select> w komponencie index.html. Zastąp klasę crane-input klasą mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Tuż nad tagiem <select> dodaj te znaczniki do strzałki menu komponentu MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Tuż pod tagiem zamykającym </select> zastąp klasę crane-label klasą mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Następnie bezpośrednio po etykiecie dodaj te znaczniki:
<div class="mdc-line-ripple"></div>
Na koniec dodaj te tagi wokół elementu <select> (ale wewnątrz elementu crane-field):
<div class="mdc-select">
...
</div>
Otrzymany znacznik 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 pliku JS
Na górze app.js dodaj instrukcję importu:
import {MDCSelect} from '@material/select';
Aby utworzyć instancję wyboru, na dole sekcji app.js dodaj ten fragment:
new MDCSelect(document.querySelector('.mdc-select'));
Załaduj ponownie stronę, która powinna wyglądać tak:
Komponent MDC Select prezentuje użytkownikowi listę opcji w znanym formacie, ale z nowoczesnym stylem.
5. Zaktualizuj pola tekstowe
Pola tekstowe w interfejsie Material Design są znacznie łatwiejsze w użyciu niż zwykłe elementy <input>. Zostały one zaprojektowane w taki sposób, aby można je było łatwo zidentyfikować w złożonych treściach i wyświetlać subtelne recenzje wizualne, gdy użytkownik wejdzie z nimi w interakcję.
Zainstaluj moduł węzła MDC
Naciśnij Ctrl+C, by wyłączyć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/textfield npm start
Dodawanie kodu CSS
Dodaj do _theme.scss zaraz po zaimportowaniu danych:
@import "@material/textfield/mdc-text-field";
Zaktualizuj znaczniki
W index.html odszukaj element <input> w polu „Nazwa”. 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 elementem mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Następnie bezpośrednio po etykiecie dodaj te znaczniki:
<div class="mdc-line-ripple"></div>
Na koniec umieść wszystkie 3 elementy w taki sposób:
<div class="mdc-text-field">
...
</div>
Znaczniki powinny 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 te czynności w przypadku wszystkich innych elementów <input> na stronie.
Oznacznik dla pól „Adres”, „Miasto” i „Kod pocztowy” powinien 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, ponieważ nie są już używane.
Importowanie kodu JavaScript
Na górze app.js dodaj instrukcję importu:
import {MDCTextField} from '@material/textfield';
Aby utworzyć instancje pól tekstowych, dodaj na końcu pliku app.js następujące wiersze kodu:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Załaduj ponownie stronę, która powinna wyglądać tak:
Wszystkie pola tekstowe zostały zaktualizowane, aby można było używać motywu Material Design.
6. Podsumowanie
Zastąpiono niektóre typowe komponenty (pola tekstowe, zaznaczenie i przycisk) bez wprowadzania zmian w aplikacji. Brawo!
Inne elementy, które mogą mieć duży wpływ na jakość aplikacji, to górny pasek aplikacji i szuflada nawigacyjna.
Dalsze kroki
Aby poznać jeszcze więcej komponentów MDC Web, otwórz katalog MDC Web.
Jeśli chcesz korzystać z określonej platformy MDC, przejdź do artykułu MDC-112: Integrating MDC z Web Frameworks.