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, MDC 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, Material Components Web (MDC Web) menyatukan desain dan teknik dengan library komponen untuk menciptakan konsistensi di seluruh aplikasi dan situs. Setiap komponen MDC Web berada di 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 mem-build halaman login menggunakan beberapa komponen MDC Web.

Yang akan Anda bangun

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. Codelab 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 "Batal" 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 menyesuaikannya di MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis.

Yang Anda butuhkan

• Node.js versi terbaru (yang disertakan dengan npm, pengelola paket JavaScript).
• Kode contoh (yang akan didownload pada langkah berikutnya)
• Pengetahuan dasar tentang HTML, CSS, dan JavaScript

Kami selalu berupaya meningkatkan kualitas tutorial kami. Bagaimana Anda menilai tingkat pengalaman Anda dalam 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 pada nama direktori root. Jika Anda mendownload aplikasi awal dari tombol di atas, tambahkan sufiks -master setiap kali direktori root dirujuk selama 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 mendapatkan bantuan lebih lanjut: Meng-clone repositori dari GitHub

Instal dependensi project

Dari direktori starter, jalankan:

npm install

Anda akan melihat banyak aktivitas dan di akhir, terminal Anda akan menampilkan penginstalan yang berhasil:

Jika tidak, jalankan npm audit fix.

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

Agar kode kita berfungsi di browser lama seperti IE 11, kita menggunakan transpiler bernama Babel untuk mentranspilasi sintaksis JavaScript ES2015 MDC Web ke sintaksis JavaScript ES5.

Kita akan menggunakan webpack untuk memaketkan file dan menyajikan situs secara lokal. Konfigurasi webpack untuk project ini telah disiapkan untuk Anda di file webpack.config.js. Untuk mengetahui detail selengkapnya tentang cara konfigurasinya, lihat panduan Memulai.

Menjalankan aplikasi awal

Di direktori yang sama, jalankan:

npm start

Sebaiknya jalankan npm start di tab atau jendela terminal terpisah, sehingga server lokal dapat terus berjalan saat kita memodifikasi kode.

webpack-dev-server akan dimulai. Arahkan browser Anda 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.

Lihat kode

Metadata di index.html

Di direktori starter, 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 dibuat 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 MDC Web ditata gayanya menggunakan Sass, bahasa ekstensi untuk CSS. Sass dikompilasi menjadi CSS biasa menggunakan webpack. File Sass di MDC Web ditulis dalam sintaksis yang disebut SCSS, dan memiliki ekstensi file yang diakhiri dengan .scss.

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

Secara umum, sebaiknya Anda melakukan modifikasi gaya kustom pada komponen menggunakan class Anda sendiri. Anda mungkin melihat beberapa class CSS kustom dalam 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 dalam codelab MDC-102, dan dapat diabaikan untuk saat ini.

Setelah Anda memahami kode awal, sekarang mari kita implementasikan komponen pertama kita.

Untuk memulai, kita akan menambahkan dua kolom teks ke halaman login, tempat pengguna dapat memasukkan nama pengguna dan sandi mereka. 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 di artikel di Pedoman Material.

Instal MDC Text Field

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

npm install @material/textfield

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

npm install material-components-web

Lihat informasi selengkapnya tentang penggunaan paket Web MDC utama di sini.

Tambahkan HTML

Di index.html, tambahkan berikut ini di dalam elemen <form> di 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
• Sub-elemen 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, sebuah metode yang digunakan untuk menyusun class CSS secara semantik. MDC Web mengikuti versi yang diubah dari pola ini, seperti yang ditunjukkan dalam codelab ini.

Tambahkan 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 menyelaraskan dan memusatkan kolom teks:

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

Tambahkan 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'));

Menambahkan validasi HTML5

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

Anda harus:

• Tambahkan atribut required ke elemen mdc-text-field__input dari kolom teks Nama Pengguna dan Sandi
• Tetapkan atribut minlength 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 riak garis (garis batas bawah yang beriak 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 mengarahkan kursor dan fokus secara otomatis.
• Kolom Teks MDC mencakup banyak fitur dan varian gaya, seperti teks bantuan, penyandingan ikon, variasi gaya bergaris, dan textarea. Lihat di sini.

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

Menginstal Tombol MDC

Untuk menginstal paket komponen tombol, jalankan:

npm install @material/button

Tambahkan 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 "Cancel", kita menggunakan gaya tombol default. Namun, tombol "Berikutnya" menggunakan varian gaya diangkat, yang ditunjukkan oleh class mdc-button--raised.

Untuk menyelaraskannya dengan mudah nanti, kita 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.

Tambahkan 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 riak tinta ke tombol

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

Untuk menginstal paket komponen riak, jalankan:

npm install @material/ripple

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

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

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

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

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

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

Ada banyak varian gaya lain dari Tombol MDC, seperti tanpa elevasi dan bergaris luar. Lihat di sini.

Isi kolom teks dengan nilai yang valid, lalu tekan tombol "BERIKUTNYA". Anda berhasil! Anda akan melanjutkan pekerjaan di halaman ini di MDC-102.

Catatan: Untuk tujuan latihan ini, formulir dikirimkan melalui HTTP GET, dan tidak ada pemrosesan di sisi server. Situs atau aplikasi produksi apa pun 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 hanya beberapa baris CSS dan JavaScript, library Komponen Material untuk web telah membantu Anda membuat halaman login yang indah yang mematuhi pedoman Desain Material, serta terlihat dan berfungsi 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 di direktori tersebut. Jangan lupa untuk menjalankan npm install di direktori tersebut terlebih dahulu.

Langkah berikutnya

Kolom Teks, Tombol, dan Ripple adalah tiga komponen inti dalam library MDC Web, tetapi sebenarnya masih banyak lagi. Anda juga dapat menjelajahi komponen lainnya di MDC Web.

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