1. Pengantar
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, Web Komponen Material (MDC Web) menggabungkan desain dan engineering dengan library komponen untuk menciptakan konsistensi di seluruh aplikasi dan situs. Setiap komponen Web MDC berada di modul node-nya sendiri, sehingga seiring perkembangan sistem Desain Material, komponen ini dapat diupdate dengan mudah untuk memastikan implementasi piksel-sempurna yang konsisten dan kepatuhan terhadap standar pengembangan front end Google. MDC juga tersedia untuk Android, iOS, dan Flutter.
Dalam codelab ini, Anda akan membangun halaman login menggunakan beberapa komponen Web MDC.
Yang akan Anda bangun
Codelab ini adalah yang pertama dari tiga codelab yang akan memandu Anda membangun aplikasi bernama Shrine, sebuah situs e-commerce yang menjual pakaian dan perlengkapan rumah. Kursus ini akan menunjukkan 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 "Cancel" dan satu untuk "Berikutnya"
- Nama situs (Shrine)
- Gambar logo Shrine
Komponen Web MDC dalam codelab ini
- Kolom teks
- Tombol
- Ripple
Yang Anda butuhkan
- Versi terbaru Node.js (yang dilengkapi dengan npm, pengelola paket JavaScript).
- Kode contoh (akan didownload pada langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Kami selalu berupaya untuk meningkatkan kualitas tutorial. Bagaimana Anda menilai tingkat pengalaman Anda dengan pengembangan web?
2. Menyiapkan lingkungan pengembangan
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-101/starter. Pastikan untuk memasukkan cd ke dalam direktori tersebut sebelum memulai.
...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
Menginstal dependensi project
Dari direktori awal, jalankan:
npm install
Anda akan melihat banyak aktivitas dan di akhir, terminal Anda akan menunjukkan penginstalan yang berhasil:
Jika tidak, jalankan npm audit fix.
Menjalankan aplikasi awal
Dalam direktori yang sama, jalankan:
npm start
webpack-dev-server akan dimulai. Arahkan browser ke http://localhost:8080/ untuk melihat halaman.
Berhasil! Kode awal untuk halaman login Shrine akan berjalan di browser Anda. Anda akan melihat nama "Shrine" dan logo Shrine tepat di bawahnya.
Lihat kodenya
Metadata di 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 class CSS mdc-*, seperti class mdc-text-field. (MDC Web memperlakukan struktur DOM-nya sebagai bagian dari API publiknya.)
Secara umum, Anda sebaiknya melakukan modifikasi gaya kustom pada komponen yang 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;
}
Setelah Anda memahami kode awal, sekarang mari kita implementasikan komponen pertama kita.
3. Menambahkan kolom teks
Untuk memulai, kita akan menambahkan dua kolom teks ke halaman login kita, di mana orang akan dapat memasukkan nama pengguna dan sandi mereka. Kita akan menggunakan komponen Kolom Teks MDC, yang menyertakan fungsi bawaan yang menampilkan label mengambang dan mengaktifkan ripple sentuh.
Instal Kolom Teks MDC
Komponen Web MDC dipublikasikan melalui paket NPM. Untuk menginstal paket komponen kolom teks, jalankan:
npm install @material/textfield@^6.0.0
Menambahkan HTML
Di index.html, tambahkan kode berikut di dalam elemen <form> di isi:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
Struktur DOM Kolom Teks MDC terdiri dari beberapa bagian:
- Elemen utama,
mdc-text-field - Subelemen
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-label, danmdc-line-ripple
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 menempatkan kolom teks di tengah:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
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'));
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
requiredke elemenmdc-text-field__inputkolom teks Nama pengguna dan Sandi - Tetapkan atribut
minlengthelemenmdc-text-field__inputkolom teks Password ke"8"
Sesuaikan kedua elemen <label class="mdc-text-field mdc-text-field--filled"> agar terlihat seperti ini:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
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 beriak ke luar):
4. Menambahkan tombol
Selanjutnya, kita akan menambahkan dua tombol ke halaman login: "Cancel" dan "Next". Kita akan menggunakan komponen Tombol MDC, bersama dengan komponen MDC Ripple, untuk melengkapi efek riak tinta Desain Material yang ikonis.
Tombol Instal MDC
Untuk menginstal paket bagi komponen tombol, jalankan:
npm install @material/button@^6.0.0
Menambahkan HTML
Di index.html, tambahkan hal berikut di bawah tag penutup elemen <label class="mdc-text-field mdc-text-field--filled 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 "Cancel" tombol, kita menggunakan
gaya tombol {i>default<i}. Namun, tombol "Berikutnya" menggunakan varian gaya dinaikkan, yang ditunjukkan oleh class mdc-button--raised.
Agar mudah selaraskan nanti, kita menggabungkan dua elemen mdc-button dalam elemen <div>.
Menambahkan CSS
Di login.scss, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/button/mdc-button";
Untuk meratakan 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 tinta ke tombol
Saat pengguna menyentuh atau mengklik tombol, respons akan ditampilkan dalam bentuk riak tinta. Komponen ink ripple memerlukan JavaScript, jadi kita akan menambahkannya ke halaman.
Untuk menginstal paket komponen ripple, jalankan:
npm install @material/ripple@^6.0.0
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 muncul saat Anda mengklik setiap tombol.
Isi kolom teks dengan nilai yang valid, lalu tekan tombol "NEXT" tombol. Anda berhasil! Anda akan terus mengerjakan halaman ini di MDC-102.
5. Rekap
Menggunakan markup HTML dasar dan hanya beberapa baris CSS dan JavaScript, Komponen Material untuk pustaka web telah membantu Anda membuat laman masuk yang menarik yang sesuai dengan pedoman Desain Material, dan terlihat serta berperilaku secara konsisten di semua perangkat.
Langkah berikutnya
Kolom Teks, Tombol, dan Ripple adalah tiga komponen inti di library Web MDC, tetapi 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.