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 |
Komponen Material untuk web (MDC Web) tidak bergantung pada framework, dibangun menggunakan JavaScript biasa. Hal ini membantu MDC Web berfungsi dengan lancar dalam proses pengembangan Anda. Komponen ini dapat diinstal sesuai kebutuhan untuk membantu melakukan peningkatan desain yang fleksibel di aplikasi yang ada.
Yang akan Anda bangun
Dalam codelab ini, Anda akan mengganti beberapa komponen yang ada dalam formulir dengan komponen yang disediakan oleh MDC Web:
Komponen MDC Web dalam codelab ini
- Tombol
- Pilih
- Kolom teks
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
Bagaimana Anda menilai tingkat pengalaman Anda dalam pengembangan web?
2. Menyiapkan lingkungan pengembangan
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-111/starter. Pastikan untuk cd ke direktori tersebut sebelum Anda 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-111/starter
Instal dependensi project
Dari direktori awal (material-components-web-codelabs/mdc-111/starter), jalankan:
npm install
Anda akan melihat banyak aktivitas dan di akhir, terminal Anda akan menampilkan penginstalan yang berhasil:
Menjalankan aplikasi awal
Di direktori starter, jalankan:
npm start
webpack-dev-server akan dimulai. Arahkan browser Anda ke http://localhost:8080/ untuk melihat halaman.
Berhasil! Anda akan melihat formulir alamat pengiriman aplikasi:
3. Perbarui tombol
Instal Tombol MDC
Tekan Ctrl+C untuk menghentikan server pengembangan. Kemudian, instal paket NPM Tombol MDC dan mulai ulang server:
npm install @material/button npm start
Mengimpor CSS
Di bagian atas _theme.scss, hapus blok .crane-button { ... }, lalu tambahkan kode berikut di tempatnya:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Perbarui markup
Di index.html, hapus class crane-button dari elemen <button>, tambahkan class mdc-button dan mdc-button--raised, serta susun label dalam elemen <span> dengan class 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>
Menambahkan riak
Tombol MDC dapat digunakan tanpa JavaScript. Namun, menambahkan riak interaktif ke tombol akan menciptakan pengalaman pengguna yang lebih kaya.
Tekan Ctrl+C untuk menghentikan server pengembangan. Kemudian, jalankan:
npm install @material/ripple npm start
Tambahkan pernyataan impor berikut ke bagian atas app.js:
import {MDCRipple} from '@material/ripple';
Untuk membuat instance riak pada tombol, tambahkan kode berikut di bagian bawah app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Mengimpor font Roboto
Secara default, Desain Material menggunakan Roboto untuk typeface komponen.
Di index.html, impor font Web Roboto dengan menambahkan kode berikut ke elemen <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Muat ulang halaman, dan Anda akan melihat sesuatu seperti ini:
Tombol kini menampilkan efek riak halus sebagai masukan visual saat ditekan.
4. Memperbarui elemen select
Komponen MDC Select membungkus elemen <select> HTML native. Gunakan di mana pun Anda biasanya menggunakan <select>. Mari perbarui kolom "Negara Bagian".
Instal modul Node MDC
Tekan Ctrl+C untuk menghentikan server pengembangan. Kemudian, jalankan:
npm install @material/select npm start
Mengimpor CSS
Tambahkan kode berikut ke _theme.scss, tepat setelah impor tombol:
@import "@material/select/mdc-select";
Memperbarui markup
Temukan elemen <select> di index.html. Ganti class crane-input dengan mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Tepat di atas tag <select>, tambahkan markup berikut untuk panah drop-down komponen MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Tepat di bawah tag penutup </select>, ganti class crane-label dengan mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Kemudian, tambahkan markup berikut segera setelah label:
<div class="mdc-line-ripple"></div>
Terakhir, tambahkan tag berikut di sekitar elemen <select> (tetapi di dalam elemen crane-field):
<div class="mdc-select">
...
</div>
Markup yang dihasilkan akan terlihat seperti ini:
<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>
Mengimpor JS
Tambahkan pernyataan impor berikut ke bagian atas app.js:
import {MDCSelect} from '@material/select';
Untuk membuat instance pilihan, tambahkan kode berikut ke bagian bawah app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Muat ulang halaman, yang sekarang akan terlihat seperti ini:
Komponen MDC Select menyajikan daftar opsi untuk pengguna dalam format yang sudah dikenal, tetapi dengan gaya modern.
5. Memperbarui kolom teks
Kolom teks Desain Material memiliki peningkatan kegunaan yang signifikan dibandingkan elemen <input> biasa. Chip ini didesain agar mudah diidentifikasi dalam konten yang rumit, dan menampilkan masukan visual halus saat pengguna berinteraksi dengannya.
Instal modul Node MDC
Tekan Ctrl+C untuk menghentikan server pengembangan. Kemudian, jalankan:
npm install @material/textfield npm start
Tambahkan CSS
Tambahkan kode berikut ke _theme.scss, tepat setelah impor select:
@import "@material/textfield/mdc-text-field";
Perbarui markup
Di index.html, temukan elemen <input> untuk kolom "Name". Ganti class crane-input dengan mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Selanjutnya, ganti class crane-label dengan mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Kemudian, tambahkan markup berikut segera setelah label:
<div class="mdc-line-ripple"></div>
Terakhir, gabungkan ketiga elemen dengan kode berikut:
<div class="mdc-text-field">
...
</div>
Markup yang dihasilkan akan terlihat seperti ini:
<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>
Ulangi prosedur yang sama untuk semua elemen <input> lainnya di halaman.
Markup untuk kolom "Alamat", "Kota", dan "Kode Pos" akan terlihat seperti ini:
<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>
Anda kini dapat menghapus gaya .crane-label dan .crane-input dari _theme.scss, yang tidak lagi digunakan.
Mengimpor JS
Tambahkan pernyataan impor berikut ke bagian atas app.js:
import {MDCTextField} from '@material/textfield';
Untuk membuat instance kolom teks, tambahkan kode berikut ke bagian bawah app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Muat ulang halaman, yang sekarang akan terlihat seperti ini:
Semua kolom teks kini telah diperbarui untuk menggunakan Tema Material.
6. Rangkuman
Anda telah mengganti beberapa komponen umum (kolom teks, pilihan, dan tombol) tanpa melakukan desain ulang aplikasi secara menyeluruh. Kerja bagus!
Komponen lain yang juga dapat membuat perbedaan besar mencakup panel aplikasi atas dan panel navigasi.
Langkah berikutnya
Anda dapat mempelajari lebih lanjut komponen di MDC Web dengan mengunjungi katalog MDC Web.
Jika Anda tertarik menggunakan MDC Web dengan framework tertentu, buka MDC-112: Mengintegrasikan MDC dengan Framework Web.