MDC-101 Web: podstawy komponentów MDC (internet)

Logo_components_color_2x_web_96dp.png

Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. Firma MDC została stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera ona dziesiątki pięknych i funkcjonalnych elementów interfejsu oraz jest dostępna w aplikacjach na Androida, iOS, internet oraz Flutter.

material.io/develop

Czym są materiały w stylu Material Design i Komponenty internetowe?

Material Design to system do tworzenia atrakcyjnych i odważnych produktów cyfrowych. Dzięki połączeniu stylu, marki, interakcji i ruchu w ramach jednego zestawu zasad i komponentów zespoły produktowe mogą wykorzystać swój największy potencjał projektowy.

W przypadku komputerów i internetu mobilnego Material Component Web (MDC Web) łączy projektowanie i technologię z biblioteką komponentów, aby zapewnić spójność w aplikacjach i witrynach. Komponenty MDC Web działają w oddzielnych modułach węzłów, więc w miarę rozwoju systemu Material Design można z łatwością aktualizować te komponenty, by zapewnić spójną implementację pikseli i zgodność ze standardami programistycznymi Google. Narzędzie MDC jest też dostępne na Androida, iOS i Flutter.

Dzięki nim dowiesz się, jak utworzyć stronę logowania, korzystając z kilku komponentów MDC Web.

Co stworzysz

To pierwsze ćwiczenie z programowania, które przeprowadzi Cię przez proces tworzenia aplikacji o nazwie Shrine – na stronie internetowej sklepu internetowego z odzieżą i wyposażeniem domu. Dowiesz się z niego, jak dostosować komponenty, aby dopasować je do dowolnej marki lub stylu, korzystając z MDC Web.

W tym ćwiczeniu utworzysz stronę logowania do świątyni:

  • Dwa pola tekstowe do wpisania nazwy użytkownika i hasła
  • Dwa przyciski – jeden dla &"Anuluj&, a jeden dla &"Dalej"
  • Nazwa witryny (sanktuarium)
  • Logo Shrine&#39

Komponenty MDC Web w tym ćwiczeniu z programowania

  • Pole tekstowe
  • Przycisk
  • Echo

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 wiedza o HTML, CSS i JavaScript

Cały czas staramy się ulepszać nasze samouczki. Jak oceniasz swoje doświadczenie w tworzeniu stron internetowych?

Początkujący Średnio zaawansowany Zaawansowany

Pobierz aplikację początkujących z programowania

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-web-codelabs-master/mdc-101/starter. Pamiętaj, aby przed wykonaniem czynności umieścić w cd katalog.

...lub skopiuj z GitHuba

Aby skopiować to ćwiczenia z programowania na GitHubie, uruchom następujące 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 startowym uruchom polecenie:

npm install

Zobaczysz wiele działań, a na końcu terminal powinien udać się zainstalować:

Jeśli tak się nie stanie, uruchom polecenie npm audit fix.

Uruchamianie aplikacji startowej

W tym samym katalogu uruchom polecenie:

npm start

Uruchomi się webpack-dev-server. Otwórz w przeglądarce adres http://localhost:8080/, aby wyświetlić stronę.

Gotowe. W przeglądarce powinien być uruchomiony kod startowy strony logowania Shrine&#39. Pod spodem powinna się pojawić nazwa „sanktuarium”.

Zobacz kod

Metadane w pliku index.html

W katalogu początkowym otwórz index.html za pomocą ulubionego edytora kodu. Powinny 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>

Tag <link> służy do załadowania pliku bundle-login.css wygenerowanego przez pakiet internetowy, a tag <script> zawiera plik bundle-login.js. Oprócz tego plik normalize.css jest wykorzystywany do spójnego renderowania w różnych przeglądarkach, a także udostępnia czcionę robots z Google Fonts.

Style niestandardowe w: login.scss

Komponenty MDC Webs są używane w klasach CSS mdc-*, takich jak klasa mdc-text-field. MDC Web traktuje strukturę DOM jako część swojego publicznego interfejsu API.

Ogólnie zaleca się, aby modyfikacje niestandardowych stylów komponentów odbywały się za pomocą własnych klas. W kodzie HTML mogły pojawić się niestandardowe klasy CSS, takie jak shrine-logo. Te style są zdefiniowane w login.scss, aby dodać do strony style podstawowe.

Otwórz aplikację 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;
}

Skoro znasz już kod startowy, zaimplementuj nasz pierwszy komponent.

Na początek dodamy 2 pola tekstowe do naszej strony logowania, gdzie użytkownicy będą mogli podać swoją nazwę użytkownika i hasło. Wykorzystamy komponent Pole tekstowe MDC, który zawiera wbudowaną funkcję wyświetlającą etykietę pływającą i aktywuje dotykanie tekstu.

Zainstaluj pole tekstowe MDC

Komponenty MDC Web są publikowane za pomocą pakietów NPM. Aby zainstalować pakiet komponentu pola tekstowego, uruchom polecenie:

npm install @material/textfield

Dodawanie kodu HTML

W elemencie index.html dodaj w treści element <form>:

<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 elementów:

  • Główny element: mdc-text-field
  • Elementy podrzędne mdc-text-field__input, mdc-floating-label i mdc-line-ripple

Dodawanie usługi porównywania cen

W login.scss dodaj następujące instrukcje importu po istniejącym importu:

@import "@material/textfield/mdc-text-field";

W tym samym pliku dodaj te style, by wyrównać i wyśrodkować pola tekstowe:

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

Dodawanie JavaScriptu

Otwórz plik login.js, który obecnie jest pusty. Dodaj ten kod, aby zaimportować pola tekstowe i utworzyć ich wystąpienie: 

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

Dodawanie walidacji HTML5

Wartości w polach tekstowych są wskazywane, gdy określone pole jest prawidłowe lub zawiera błąd, za pomocą atrybutów dostarczanych przez interfejs API walidacji HTML5&s

Wykonaj wtedy te czynności:

  • Dodaj atrybut required do elementów mdc-text-field__input w polach tekstowych Nazwa użytkownika i Hasło
  • Ustaw wartość atrybutu minlength elementu mdc-text-field__input w polu tekstowym Password na "8".

Dostosuj te dwa elementy <div class="mdc-text-field"> 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ę na stronie http://localhost:8080/. Zobaczysz stronę z dwoma polami tekstowymi „Nazwa użytkownika” i „Hasło”.

Kliknij pola tekstowe, aby zobaczyć animację pływającej etykiety i animację linii bazowej (dolna linia rikująca na zewnątrz):

Następnie dodamy 2 przyciski do strony logowania: "Anuluj&"Dalej." Wykorzystamy komponent przycisku MDC wraz z komponentem MDC Echo, aby zakończyć efekt fali strzyżania materiału Material Design.

Zainstaluj przycisk MDC

Aby zainstalować pakiet komponentu Przycisk, uruchom polecenie:

npm install @material/button

Dodawanie kodu HTML

W index.html dodaj poniżej tag zamykający 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” korzysta z wersji podniesionej, którą wskazuje klasa mdc-button--raised.

Aby łatwo je wyrównać później, pakujemy dwa elementy mdc-button w element <div>.

Dodawanie usługi porównywania cen

W login.scss już dodaj te informacje:

@import "@material/button/mdc-button";

Aby wyrównać przyciski i dodać do nich margines, dodaj te style do elementu login.scss:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

Dodawanie Echa do przycisków

Gdy użytkownik dotknie przycisku, jego opinia powinna pojawić się w postaci krzywej atramentu. Komponent Echa wymaga tu kodu JavaScript, więc dodamy go do strony.

Aby zainstalować pakiet komponentu Echa, uruchom polecenie:

npm install @material/ripple

Na górze strony login.js dodaj te instrukcje importu:

import {MDCRipple} from '@material/ripple';

Aby utworzyć Echo, dodaj do login.js następujące elementy:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Ze względu na to, że nie musimy zachować odwołania do Echa, nie trzeba przypisywać go do zmiennej.

To już wszystko Odśwież stronę. Echo wyświetli się po kliknięciu każdego przycisku.

Wypełnij pola tekstowe poprawnymi wartościami i naciśnij przycisk &"NEXT". Udało Ci się wykorzystać wszystkie nagrody. Dalej będziesz pracować na tej stronie w MDC-102.

Używając podstawowych znaczników HTML i kilku wierszy kodu CSS oraz JavaScript, komponenty Material Design dla biblioteki internetowej pomogły Ci utworzyć piękną stronę logowania zgodną z wytycznymi Material Design, która wygląda i działa tak samo na wszystkich urządzeniach.

Dalsze kroki

Pole tekstowe, przycisk i echo to trzy główne komponenty biblioteki MDC, ale jest ich znacznie więcej. Możesz też zapoznać się z pozostałymi komponentami w sieci MDC Web.

Informacje o szufladzie nawigacji i liście obrazów znajdziesz w artykule MDC-102: Material Design Layout and Layout. Dziękujemy za wypróbowanie komponentów komponentów. Mamy nadzieję, że podobały Ci się ćwiczenia z programowania.

Ukończenie ćwiczeń z programowania było sporą ilością czasu i wysiłku.

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam

Chcę w przyszłości nadal korzystać z Komponentów Material Design

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam