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 |
Komponenty Material Komponenty do przeglądania internetu (MDC Web) są niezależne od platformy i są tworzone za pomocą zwykłego JavaScriptu. Dzięki temu MDC Web będzie płynnie współdziałać z procesem programowania. W razie potrzeby możesz zainstalować te komponenty, aby ułatwić elastyczny projekt strony w obecnej aplikacji.
Co utworzysz
W ramach tego ćwiczenia w Codelabs zastąpisz niektóre istniejące komponenty w formularzu tymi dostarczonymi przez MDC Web:
Komponenty internetowe MDC w tym ćwiczeniu z programowania
- Przycisk
- Wybierz
- Pole tekstowe
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
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-111/starter. Zanim zaczniesz, nie zapomnij o cd w tym katalogu.
...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-111/starter
Instalowanie zależności projektu
Z katalogu startowego (material-components-web-codelabs/mdc-111/starter) uruchom polecenie:
npm install
Zobaczysz dużo aktywności, a na końcu terminala powinna pojawić się wiadomość o pomyślnej 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! Formularz adresu dostawy powinien pojawić się w aplikacji:
3. Zaktualizuj przycisk
Przycisk Zainstaluj MDC
Naciśnij Ctrl+C, by wyłączyć serwer programistyczny. 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>
Dodaj Echo
Przyciski MDC można używać bez JavaScriptu. Dodanie interaktywnej fali do przycisku zwiększa jednak wygodę użytkowników.
Naciśnij Ctrl+C, by wyłączyć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/ripple npm start
Na górze app.js dodaj instrukcję importu:
import {MDCRipple} from '@material/ripple';
Aby utworzyć wystąpienie fali na przycisku, na dole elementu app.js dodaj:
new MDCRipple(document.querySelector('.mdc-button'));
Importuj czcionkę Roboto
Domyślnie Material Design używa krojów czcionek 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 subtelny efekt fali.
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>. Zaktualizuj pole „State”.
Zainstaluj moduł węzła MDC
Naciśnij Ctrl+C, by wyłączyć serwer programistyczny. Następnie uruchom polecenie:
npm install @material/select npm start
Importowanie usługi porównywania cen
Dodaj do _theme.scss ten kod tuż po zaimportowaniu przycisku:
@import "@material/select/mdc-select";
Zaktualizuj znaczniki
Znajdź element <select> w tagu index.html. Zastąp klasę crane-input elementem 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 zamykającym tagiem </select> zastąp klasę crane-label elementem 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 dookoła elementu <select> (ale wewnątrz elementu crane-field):
<div class="mdc-select">
...
</div>
Znaczniki powinny 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 stylu Material Design mają znacznie większą przydatność w porównaniu ze zwykłymi elementami <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 usługi porównywania cen
Dodaj do _theme.scss zaraz po zaimportowaniu danych:
@import "@material/textfield/mdc-text-field";
Aktualizowanie znaczników
W index.html odszukaj element <input> w polu „Nazwa”. Zastąp klasę crane-input elementem 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 tę samą procedurę w przypadku wszystkich pozostałych elementów <input> na stronie.
Znaczniki w polach „Address”, „Miasto” i „ZIP Code” 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ąć z elementu _theme.scss style .crane-label i .crane-input, które nie są już używane.
Importowanie pliku JS
Na górze app.js dodaj instrukcję importu:
import {MDCTextField} from '@material/textfield';
Aby utworzyć wystąpienie pól tekstowych, na dole sekcji app.js dodaj:
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 również mogą robić duże wrażenie, to górny pasek aplikacji i szuflada nawigacji.
Dalsze kroki
Jeszcze więcej komponentów MDC Web znajdziesz w katalogu internetowym MDC.
Jeśli chcesz korzystać z określonej platformy MDC, przejdź do artykułu MDC-112: Integrating MDC z Web Frameworks.