MDC-101 Web: Dasar-Dasar Komponen Material (MDC) (Web)

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MMD memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web dan Flutter. material.io/develop

Apa yang dimaksud dengan Desain Material dan Komponen Material untuk Web?

Desain Material adalah sistem untuk mem-build produk digital yang menarik dan indah. Dengan menyatukan gaya, branding, interaksi, dan gerakan di bawah kumpulan prinsip dan komponen yang konsisten, tim produk dapat mewujudkan potensi desain terbesar mereka.

Untuk desktop dan web seluler, Web Komponen Material (MDC Web) menyatukan desain dan teknik dengan library komponen untuk menciptakan konsistensi di seluruh aplikasi dan situs. Komponen Web MDC masing-masing berada dalam modul node-nya sendiri, sehingga seiring berkembangnya sistem Desain Material, komponen ini dapat dengan mudah diupdate untuk memastikan implementasi pixel-Perfect yang konsisten dan kepatuhan terhadap standar pengembangan front-end Google. MDC juga tersedia untuk Android, iOS, dan Flutter.

Dalam codelab ini, Anda akan membuat halaman login menggunakan beberapa komponen MDC Web.

Yang akan Anda build

Codelab ini adalah yang pertama dari tiga codelab yang akan memandu Anda mem-build aplikasi bernama Shrine, sebuah situs e-commerce yang menjual pakaian dan perlengkapan rumah. Codlab ini akan mendemonstrasikan cara menyesuaikan komponen agar mencerminkan merek atau gaya apa pun menggunakan MDC Web.

Dalam codelab ini, Anda akan mem-build halaman login untuk Shrine yang berisi:

• Dua kolom teks, yang pertama untuk memasukkan nama pengguna dan yang kedua untuk sandi
• Dua tombol, satu untuk "Batalkan" dan satu untuk "Berikutnya"
• Nama situs (Shrine)
• Gambar logo Shrine

Codelab terkait dapat ditemukan di:

• MDC-102: Tata Letak dan Struktur Desain Material
• MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis

Di akhir MDC 103, Anda akan membuat situs yang terlihat seperti ini:

Komponen Web MDC dalam codelab ini

• Kolom teks
• Tombol
• Ripple

Dalam codelab ini, Anda akan menggunakan komponen default yang disediakan oleh MDC Web. Anda akan mempelajari cara menyesuaikan komponen tersebut di MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis.

Yang Anda butuhkan

• Versi terbaru Node.js (yang dipaketkan dengan npm, pengelola paket JavaScript).
• Kode contoh (untuk didownload di langkah berikutnya)
• Pengetahuan dasar tentang HTML, CSS, dan JavaScript

Kami selalu ingin meningkatkan kualitas tutorial kami. Bagaimana Anda menilai tingkat pengalaman Anda menggunakan pengembangan web?

Pemula Menengah Mahir

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-101/starter. Pastikan untuk cd ke direktori tersebut sebelum memulai.

Perhatikan akhiran -master dalam nama direktori utama. Jika Anda mendownload aplikasi awal dari tombol di atas, tambahkan akhiran -master setiap kali direktori utama dirujuk untuk codelab ini.

...atau meng-clone codelab dari GitHub

Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

Untuk bantuan lebih lanjut: Cloning a repositori dari GitHub

Menginstal dependensi project

Dari direktori awal, jalankan:

npm install

Anda akan melihat banyak aktivitas dan di akhir terminal terdapat terminal yang berhasil menginstal:

Jika tidak, jalankan npm audit fix.

MDC Web menggunakan praprosesor CSS yang disebut Sass. Jika Anda menggunakan praprosesor CSS yang berbeda (atau tidak menggunakan sama sekali), tidak apa-apa! Anda dapat menggunakan Sass bersama praprosesor saat ini dengan menginstal sass CLI atau menggunakan plugin (misalnya, sass-loader untuk Webpack, gulp-sass untuk Gulp, atau grunt-sass untuk Grunt) di toolchain build Anda.

Agar kode kami berfungsi di browser lama seperti IE 11, kami menggunakan transpiler yang disebut Babel untuk melakukan transpilasi sintaksis JavaScript ES2015 pada MDC Web ke sintaksis JavaScript ES5.

Kami akan menggunakan webpack untuk memaketkan file kami dan untuk menayangkan situs kami secara lokal. Konfigurasi webpack untuk project ini telah disiapkan untuk Anda di file webpack.config.js. Untuk detail selengkapnya tentang cara konfigurasi, lihat Panduan Memulai.

Menjalankan aplikasi awal

Dalam direktori yang sama, jalankan:

npm start

Sebaiknya jalankan npm start di tab atau jendela terminal terpisah, sehingga server lokal dapat tetap berjalan saat kami mengubah kode.

webpack-dev-server akan dimulai. Arahkan browser ke http://localhost:8080/ untuk melihat halaman.

Jika Anda tidak berhasil menjalankan npm install atau npm start, hentikan dan lakukan pemecahan masalah pada lingkungan developer Anda.

Berhasil! Kode awal untuk halaman login Shrine akan berjalan di browser Anda. Anda akan melihat nama "Shrine" dan logo Shrine tepat di bawahnya.

Melihat kode

Metadata dalam index.html

Di direktori awal, buka index.html dengan editor kode favorit Anda. Akan berisi seperti ini:

<!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>

Di sini, tag <link> digunakan untuk memuat file bundle-login.css yang dihasilkan oleh webpack, dan tag <script> menyertakan file bundle-login.js. Selain itu, kami menyertakan normalize.css untuk rendering lintas browser yang konsisten, serta font Roboto dari Google Fonts.

Gaya kustom di login.scss

Komponen Web MDC diberi gaya menggunakan Sass, bahasa ekstensi untuk CSS. Sass dikompilasi ke dalam CSS biasa menggunakan webpack. File Sass di MDC Web ditulis dalam sintaksis yang disebut SCSS, dan memiliki ekstensi file yang diakhiri dengan .scss.

Komponen Web MDC diberi gaya menggunakan class CSS mdc-*, seperti class mdc-text-field. (MDC Web memperlakukan struktur DOM-nya sebagai bagian dari API publiknya.)

Secara umum, Anda disarankan untuk melakukan modifikasi gaya kustom pada komponen menggunakan class Anda sendiri. Anda mungkin telah melihat beberapa class CSS kustom pada HTML di atas, seperti shrine-logo. Gaya ini ditentukan di login.scss untuk menambahkan gaya dasar ke halaman.

Buka login.scss dan Anda akan melihat gaya berikut untuk halaman login:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

Anda mungkin juga telah melihat home.scss dan home.js. Ini akan digunakan di codelab MDC-102, dan dapat diabaikan untuk saat ini.

Setelah Anda memahami kode awal, mari kita implementasikan komponen pertamanya.

Untuk memulai, kami akan menambahkan dua kolom teks ke halaman login kami, tempat pengguna dapat memasukkan nama pengguna dan sandi. Kita akan menggunakan komponen Kolom Teks MDC, yang mencakup fungsi bawaan yang menampilkan label mengambang dan mengaktifkan ripple sentuh.

Kolom teks Desain Material telah disempurnakan secara signifikan untuk meningkatkan fleksibilitas merek. Peningkatan ini didukung oleh riset (UX) pengalaman pengguna yang menyeluruh demi kegunaan dan desain visual yang lebih baik.

Pelajari lebih lanjut kolom teks yang ditingkatkan dalam artikel di Pedoman Material.

Menginstal Kolom Teks MDC

Komponen Web MDC dipublikasikan melalui paket NPM. Untuk menginstal paket untuk komponen kolom teks, jalankan:

npm install @material/textfield

Anda juga dapat menginstal semua komponen Web MDC sekaligus dengan menjalankan:

npm install material-components-web

Lihat informasi selengkapnya tentang cara menggunakan paket Web MDC master di sini.

Menambahkan HTML

Di index.html, tambahkan elemen berikut di dalam elemen <form> di bagian isi:

<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>

Struktur DOM Kolom Teks MDC terdiri dari beberapa bagian:

• Elemen utama mdc-text-field
• Subelemen mdc-text-field__input, mdc-floating-label, dan mdc-line-ripple

Catatan: Garis bawah ganda (__) dan tanda hubung ganda (--) dalam nama pemilih ini berasal dari pola BEM, metode yang digunakan untuk menyusun class CSS secara semantik. MDC Web mengikuti versi yang dimodifikasi dari pola ini, seperti yang ditampilkan dalam codelab ini.

Menambahkan CSS

Di login.scss, tambahkan pernyataan impor berikut setelah impor yang ada:

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

Dalam file yang sama, tambahkan gaya berikut untuk meratakan dan bagian tengah kolom teks:

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

Menambahkan JavaScript

Buka login.js, yang saat ini kosong. Tambahkan kode berikut untuk mengimpor dan membuat instance Kolom Teks:

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

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

Tambahkan validasi HTML5

Kolom Teks menyatakan apakah input kolom valid atau berisi error, dengan menggunakan atribut yang diberikan oleh API validasi formulir HTML5.

Anda harus:

• Tambahkan atribut required ke elemen mdc-text-field__input dari kolom teks Username dan Password
• Setel atribut minlength dari elemen mdc-text-field__input kolom teks Password ke "8"

Sesuaikan kedua elemen <div class="mdc-text-field"> agar terlihat seperti ini:

<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>

Muat ulang halaman di http://localhost:8080/. Sekarang Anda akan melihat halaman dengan dua kolom teks untuk Nama Pengguna dan Sandi.

Klik kolom teks untuk melihat animasi label mengambang dan animasi ripple garis (garis batas bawah yang ripple ke luar):

Tentang kolom teks:

Kolom Teks MDC menggunakan elemen <input> HTML native, sehingga dapat digunakan dengan elemen <form> native di HTML.

• Kolom Teks MDC mencerminkan status arahkan kursor dan fokus secara otomatis.
• Kolom Teks MDC mencakup banyak fitur dan varian gaya, seperti teks bantuan, penyambungan ikon, variasi gaya yang diuraikan, dan area teks. Lihat di sini.

Selanjutnya, kita akan menambahkan dua tombol ke halaman login: "Cancel" dan "Next". Kami akan menggunakan komponen Tombol MDC, bersama dengan komponen Ripple MDC, untuk menyelesaikan efek ripple tinta Desain Material yang ikonis.

Tombol Instal MDC

Untuk menginstal paket untuk komponen tombol, jalankan:

npm install @material/button

Menambahkan HTML

Di index.html, tambahkan kode berikut di bawah tag penutup elemen <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>

Untuk tombol "Batalkan", kita menggunakan gaya tombol default. Namun, tombol "Berikutnya" menggunakan varian gaya Raised, yang ditunjukkan oleh class mdc-button--raised.

Agar mudah diselaraskan nanti, kami menggabungkan dua elemen mdc-button dalam elemen <div>.

Catatan: Komponen Tombol MDC di MDC Web tidak memerlukan JavaScript, sehingga lebih ringan dan lebih cepat digunakan dengan konektivitas jaringan yang terbatas.

Menambahkan CSS

Di login.scss, tambahkan pernyataan impor berikut setelah impor yang ada:

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

Untuk menyelaraskan tombol dan menambahkan margin di sekitarnya, tambahkan gaya berikut ke login.scss:

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

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

Menambahkan ripple tint ke tombol

Saat pengguna menyentuh atau mengklik tombol, tombol ini akan menampilkan masukan dalam bentuk ripple tinta. Komponen ripple tinta memerlukan JavaScript, jadi kita akan menambahkannya ke halaman.

Untuk menginstal paket untuk komponen ripple, jalankan:

npm install @material/ripple

Di bagian atas login.js, tambahkan pernyataan impor berikut:

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

Untuk membuat instance ripple, tambahkan kode berikut ke login.js:

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

Karena kita tidak perlu mempertahankan referensi ke instance ripple, kita tidak perlu menetapkannya ke variabel.

Selesai. Muat ulang halaman. Riak tinta akan ditampilkan saat Anda mengklik setiap tombol.

Ada banyak varian gaya lain dari Tombol MDC, seperti tidak diberi garis tinggi dan diberi garis batas. Lihat di sini.

Isi kolom teks dengan nilai yang valid, lalu tekan tombol "NEXT" Anda berhasil! Anda akan terus mengerjakan halaman ini di MDC-102.

Catatan: Untuk keperluan latihan ini, formulir dikirimkan melalui HTTP GET, dan tidak ada pemrosesan sisi server. Setiap situs produksi atau aplikasi akan menggunakan HTTP POST (dengan menambahkan method="POST" ke elemen <form>) untuk mengirimkan ke endpoint server dan memverifikasi informasi login.

Dengan menggunakan markup HTML dasar dan beberapa baris CSS serta JavaScript, Komponen Material untuk pustaka web telah membantu Anda membuat halaman login yang indah yang sesuai dengan panduan Desain Material, dan terlihat serta berperilaku secara konsisten di seluruh perangkat.

Aplikasi MDC-101 yang telah selesai tersedia di direktori ini: material-components-web-codelabs/mdc-101/complete

Anda dapat menguji versi halaman Anda berdasarkan halaman dalam direktori tersebut. Jangan lupa untuk menjalankan npm install di direktori tersebut terlebih dahulu.

Langkah berikutnya

Field Text, Button, dan Ripple adalah tiga komponen inti dalam library MDC Web, tetapi masih banyak lagi. Anda juga dapat menjelajahi komponen lainnya di Web MDC.

Anda dapat membuka MDC-102: Tata Letak dan Struktur Desain Material untuk mempelajari panel navigasi dan daftar gambar. Terima kasih telah mencoba Komponen Material. Kami harap Anda menikmati codelab ini.

Saya dapat menyelesaikan codelab ini dengan upaya dan dalam durasi waktu yang wajar

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju

Saya ingin terus menggunakan Komponen Material pada masa mendatang

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju