Material Design Lite - Panduan Cepat
Apa itu Material Design Lite?
Material Design Lite (MDL adalah pustaka komponen UI yang dibuat dengan CSS, JavaScript, dan HTML. Komponen MDL UI membantu dalam membangun halaman web dan aplikasi web yang menarik, konsisten, dan fungsional sambil mengikuti prinsip desain web modern seperti portabilitas browser, kemandirian perangkat , dan degradasi yang anggun.
Berikut adalah fitur-fitur penting dari Material Design Lite -
Desain responsif bawaan.
CSS standar dengan footprint minimal.
Berisi versi baru dari kontrol antarmuka pengguna umum seperti tombol, kotak centang, dan bidang teks yang disesuaikan untuk mengikuti konsep Desain Material.
Termasuk fitur yang ditingkatkan dan khusus seperti kartu, tata letak kolom, slider, spinner, tab, tipografi, dan sebagainya.
Dapat digunakan dengan atau tanpa perpustakaan atau lingkungan pengembangan.
Lintas-browser, dan dapat digunakan untuk membuat komponen web yang dapat digunakan kembali.
Desain responsif
Material Design Lite memiliki desain responsif bawaan sehingga situs web yang dibuat menggunakan Material Design Lite akan mendesain ulang dirinya sendiri sesuai ukuran perangkat.
Kelas Material Design Lite dibuat sedemikian rupa sehingga situs web dapat memuat berbagai ukuran layar.
Situs web yang dibuat menggunakan Material Design Lite sepenuhnya kompatibel dengan PC, tablet, dan perangkat seluler.
CSS standar
Material Design Lite hanya menggunakan CSS standar dan sangat mudah dipelajari.
Tidak ada ketergantungan pada pustaka JavaScript eksternal seperti jQuery.
ExtensibleMaterial Design Lite adalah dengan desain yang sangat minim dan datar.
Ini dirancang dengan mempertimbangkan fakta bahwa jauh lebih mudah untuk menambahkan aturan CSS baru daripada menimpa aturan CSS yang ada.
Ini mendukung bayangan dan warna-warna berani.
Warna dan corak tetap seragam di berbagai platform dan perangkat.
Dan yang paling penting, MDL benar-benar gratis untuk digunakan.
Ada dua cara untuk menggunakan Material Design Lite -
Local Installation - Anda dapat mengunduh materi file. {Primary} - {accent} .min.css dan material.min.js di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.
CDN Based Version - Anda dapat menyertakan materi. {Primer} - {aksen} .min.css dan file material.min.js ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN).
Instalasi Lokal
Ikuti langkah-langkah ini untuk penginstalan MDL -
Pergi ke https://www.getmdl.io/started/index.html untuk mengunduh versi terbaru yang tersedia.
Kemudian, letakkan file material.min.js file dalam direktori situs web Anda, misalnya / js dan material.min.css di / css.
Contoh
Sekarang Anda dapat memasukkan file css dan js ke dalam file HTML Anda sebagai berikut -
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Program di atas akan menghasilkan hasil sebagai berikut -
Versi Berbasis CDN
Anda dapat menyertakan file js dan css ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). storage.googleapis.com menyediakan konten untuk versi terbaru.
Kami menggunakan pustaka versi storage.googleapis.com CDN sepanjang tutorial ini.
Contoh
Sekarang, mari kita tulis ulang contoh di atas menggunakan material.css dan material.js dari Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Program di atas akan menghasilkan hasil sebagai berikut -
Di bab ini, kita akan membahas berbagai tata letak di Material Design Lite. HTML5 memiliki elemen penampung berikut -
<div> - Menyediakan wadah umum untuk konten HTML.
<header> - Merupakan bagian header.
<footer> - Mewakili bagian footer.
<article> - Merupakan artikel.
<section> - Menyediakan wadah umum untuk berbagai jenis bagian.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke wadah. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-layout Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen penampung luar. |
| 2 | mdl-js-layout Menambahkan perilaku MDL dasar ke tata letak. Diperlukan pada elemen penampung luar. |
| 3 | mdl-layout__header Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen header. |
| 4 | mdl-layout-icon Digunakan untuk menambahkan ikon aplikasi. Akan diganti oleh ikon menu jika keduanya terlihat. Elemen ikon opsional. |
| 5 | mdl-layout__header-row Mengidentifikasi wadah sebagai baris tajuk MDL. Diperlukan pada penampung konten header. |
| 6 | mdl-layout__title Mengidentifikasi teks judul tata letak. Diperlukan pada penampung judul tata letak. |
| 7 | mdl-layout-spacer Digunakan untuk meratakan elemen di dalam header atau laci. Itu tumbuh untuk mengisi ruang yang tersisa. Biasa digunakan untuk meratakan elemen ke kanan. Opsional pada div mengikuti judul tata letak. |
| 8 | mdl-navigation Mengidentifikasi wadah sebagai grup navigasi MDL. Diperlukan pada elemen nav. |
| 9 | mdl-navigation__link Mengidentifikasi jangkar sebagai tautan navigasi MDL. Diperlukan pada elemen jangkar header dan / atau laci. |
| 10 | mdl-layout__drawer Mengidentifikasi wadah sebagai laci tata letak MDL. Diperlukan pada elemen wadah laci. |
| 11 | mdl-layout__content Mengidentifikasi wadah sebagai konten tata letak MDL. Diperlukan pada elemen utama. |
| 12 | mdl-layout__header--scroll Membuat header bergulir dengan konten. Opsional pada elemen header. |
| 13 | mdl-layout--fixed-drawer Membuat laci selalu terlihat dan terbuka di layar yang lebih besar. Opsional pada elemen wadah luar dan bukan pada elemen wadah laci. |
| 14 | mdl-layout--fixed-header Menjadikan header selalu terlihat, bahkan di layar kecil. Opsional pada elemen wadah luar. |
| 15 | mdl-layout--large-screen-only Menyembunyikan elemen di layar yang lebih kecil. Opsional pada turunan mdl-layout. |
| 16 | mdl-layout--small-screen-only Menyembunyikan elemen di layar yang lebih besar. Opsional pada turunan mdl-layout. |
| 17 | mdl-layout__header--waterfall Mengizinkan efek "air terjun" dengan beberapa baris header. Opsional pada elemen header. |
| 18 | mdl-layout__header--transparent Menjadikan tajuk transparan dan menggambar di atas latar belakang tata letak. Opsional pada elemen header. |
| 19 | mdl-layout__header--seamed Menggunakan header tanpa bayangan. Opsional pada elemen header. |
| 20 | mdl-layout__tab-bar Mengidentifikasi wadah sebagai bilah tab MDL. Diperlukan pada elemen penampung di dalam header (tata letak tab). |
| 21 | mdl-layout__tab Mengidentifikasi jangkar sebagai tautan tab MDL. Diperlukan pada elemen jangkar bilah tab. |
| 22 | is-active Mengidentifikasi tab sebagai tab aktif default. Opsional pada elemen jangkar bilah tab dan elemen bagian tab terkait. |
| 23 | mdl-layout__tab-panel Mengidentifikasi wadah sebagai panel konten tab. Diperlukan pada elemen bagian tab. |
| 24 | mdl-layout--fixed-tabs Menggunakan tab tetap, bukan tab default yang dapat digulir. Opsional pada elemen penampung luar, bukan penampung di dalam header. |
Contoh berikut menunjukkan penggunaan kelas mdl-layout untuk mengatur gaya berbagai penampung.
Laci Tetap
Untuk membuat template dengan laci tetap tetapi tanpa header, kelas MDL berikut digunakan.
mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-drawer - Membuat laci selalu terlihat dan terbuka di layar yang lebih besar.
mdl-layout__drawer - Mengidentifikasi div sebagai laci tata letak MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-navigation - Mengidentifikasi div sebagai grup navigasi MDL.
mdl-navigation__link - Mengidentifikasi jangkar sebagai tautan navigasi MDL.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Header Tetap
Untuk membuat template dengan header tetap setelah kelas MDL tambahan digunakan.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Header dan Laci Tetap
Untuk membuat template dengan header tetap dan drawer tetap, digunakan kelas MDL tambahan.
mdl-layout--fixed-drawer - Membuat laci selalu terlihat dan terbuka di layar yang lebih besar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Scrolling Header
Untuk membuat template dengan scrolling header, kelas MDL berikut digunakan.
mdl-layout--header--scroll - Membuat header scroll dengan konten.
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Kontrak Header
Untuk membuat template dengan header yang berkontraksi saat halaman menggulir ke bawah, kelas MDL berikut digunakan.
mdl-layout__header--waterfall - Memungkinkan efek "air terjun" dengan beberapa baris header.
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Memperbaiki Header dengan Tab yang Dapat Digulir
Untuk membuat template dengan header yang memiliki tab yang dapat digulir, kelas MDL berikut digunakan.
mdl-layout__tab-bar - Mengidentifikasi wadah sebagai bilah tab MDL.
mdl-layout__tab - Mengidentifikasi jangkar sebagai tautan tab MDL.
mdl-layout__tab-panel - Mengidentifikasi wadah sebagai panel konten tab.
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Header Tetap dengan Tab Tetap
Untuk membuat template dengan header yang memiliki tab tetap, kelas MDL tambahan berikut digunakan.
mdl-layout--fixed-tabs - Menggunakan tab tetap daripada tab default yang dapat digulir.
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Kisi Material Design Lite (MDL) adalah komponen untuk menata konten untuk berbagai ukuran layar. Kisi MDL ditentukan dan diapit oleh elemen kontainer / div. Sebuah kisi memiliki 12 kolom di layar ukuran desktop, 8 di layar ukuran tablet, dan 4 di layar ukuran ponsel, di mana setiap ukuran memiliki margin dan talang yang telah ditentukan sebelumnya. Sel disusun secara berurutan dalam satu baris, dalam urutan yang ditentukan, dengan pengecualian berikut:
Jika sel kisi tidak pas untuk baris di salah satu ukuran layar, itu mengalir ke baris berikut.
Jika sel kisi memiliki ukuran kolom yang ditentukan sama dengan atau lebih besar dari jumlah kolom untuk ukuran layar, itu akan mengambil seluruh baris.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke kisi. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-layout Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen penampung luar. |
| 2 | mdl-grid Mengidentifikasi wadah sebagai komponen jaringan MDL. Diperlukan pada elemen div "luar". |
| 3 | mdl-cell Mengidentifikasi wadah sebagai sel MDL. Diperlukan pada elemen div "dalam". |
| 4 | mdl-grid--no-spacing Memperbarui sel kisi agar tidak memiliki margin di antara mereka. Opsional untuk wadah kisi. |
| 5 | mdl-cell--N-col Ini membantu menempatkan ukuran kolom untuk sel ke N, N adalah 1-12 inklusif, default ke 4; opsional untuk elemen div "dalam". |
| 6 | mdl-cell--N-col-desktop Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode desktop saja, N adalah 1-12 inklusif; opsional untuk elemen div "dalam". |
| 7 | mdl-cell--N-col-tablet Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode tablet saja, N adalah 1-8 inklusif; opsional untuk elemen div "dalam". |
| 8 | mdl-cell--N-col-phone Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode telepon saja, N adalah 1-4 inklusif; opsional untuk elemen div "dalam". |
| 9 | mdl-cell--hide-desktop Menyembunyikan sel saat dalam mode desktop. Opsional untuk elemen div "dalam". |
| 10 | mdl-cell--hide-tablet Menyembunyikan sel saat dalam mode tablet. Opsional untuk elemen div "dalam". |
| 11 | mdl-cell--hide-phone Menyembunyikan sel saat dalam mode telepon. Opsional untuk elemen div "dalam". |
| 12 | mdl-cell--stretch Meregangkan sel secara vertikal untuk mengisi induk, default; opsional untuk elemen div "dalam". |
| 13 | mdl-cell--top Meratakan sel ke bagian atas induk. Opsional untuk elemen div "dalam". |
| 14 | mdl-cell--middle Meratakan sel ke tengah induk. Opsional untuk elemen div "dalam". |
| 15 | mdl-cell--bottom Meratakan sel ke bagian bawah induk. Opsional untuk elemen div "dalam". |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-grid untuk mengatur tata letak konten di berbagai layar.
Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.
mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout__drawer - Mengidentifikasi div sebagai laci tata letak MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-navigation - Mengidentifikasi div sebagai grup navigasi MDL.
mdl-navigation__link - Mengidentifikasi jangkar sebagai tautan navigasi MDL.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-grid - Mengidentifikasi div sebagai komponen jaringan MDL.
mdl-cell - Mengidentifikasi div sebagai sel MDL.
mdl-cell--1-col - Menyetel ukuran kolom untuk sel dengan ukuran 1 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--2-col - Menyetel ukuran kolom untuk sel menjadi 2 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--4-col - Menyetel ukuran kolom untuk sel menjadi 4 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--6-col - Mengatur ukuran kolom untuk sel dengan 6 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--4-col-phone - Menetapkan ukuran kolom untuk sel dengan yang dari 4 sel dari 4 sel dalam ukuran layar ponsel.
mdl-cell--6-col-tablet - Menetapkan ukuran kolom untuk sel dengan 6 sel dari 8 sel dalam ukuran layar tablet.
mdl-cell--8-col-tablet - Menyetel ukuran kolom untuk sel dengan 8 sel dari 8 sel dalam ukuran layar tablet.
mdl_grid.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Komponen tab Material Design Lite (MDL) adalah komponen antarmuka pengguna yang membantu menampilkan beberapa layar dalam satu ruang secara eksklusif.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke tab. Tabel berikut menyebutkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-layout Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen penampung luar. |
| 2 | mdl-tabs Mengidentifikasi wadah tab sebagai komponen MDL. Diperlukan pada elemen div "luar". |
| 3 | mdl-js-tabs Menetapkan perilaku MDL dasar ke wadah tab. Diperlukan pada elemen div "luar". |
| 4 | mdl-js-ripple-effect Menambahkan efek klik riak ke tautan tab. Pilihan; berlangsung di elemen div "luar". |
| 5 | mdl-tabs__tab-bar Mengidentifikasi wadah sebagai bilah tautan tab MDL. Diperlukan pada elemen div "dalam" pertama. |
| 6 | mdl-tabs__tab Mengidentifikasi jangkar (tautan) sebagai penggerak tab MDL. Diperlukan pada semua tautan di elemen div "dalam" pertama. |
| 7 | is-active Mengidentifikasi tab sebagai tab tampilan default. Diperlukan pada satu (dan hanya satu) dari elemen div (tab) "dalam". |
| 8 | mdl-tabs__panel Mengidentifikasi wadah sebagai konten tab. Diperlukan pada setiap elemen div (tab) "dalam". |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-tab untuk mengatur tata letak konten di berbagai tab.
Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini -
mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-tabs - Mengidentifikasi wadah tab sebagai komponen MDL.
mdl-js-tabs - Menetapkan perilaku MDL dasar ke wadah tab.
mdl-tabs__tab-bar - Mengidentifikasi wadah sebagai bilah tautan tab MDL.
mdl-tabs__tab - Mengidentifikasi jangkar (tautan) sebagai penggerak tab MDL.
is-active - Mengidentifikasi tab sebagai tab tampilan default.
mdl-tabs__panel - Mengidentifikasi wadah sebagai konten tab.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Komponen footer MDL hadir dalam dua bentuk utama: mega-footer dan mini-footer. mega-footer berisi konten yang lebih kompleks daripada footer mini. Mega-footer dapat mewakili beberapa bagian konten yang dipisahkan oleh aturan horizontal, sedangkan footer mini menampilkan satu bagian konten. Footer biasanya berisi konten informasional dan yang dapat diklik, seperti link.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke mega-footer dan mini-footer. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-mega-footer Mengidentifikasi wadah sebagai komponen mega-footer MDL. Diperlukan untuk elemen footer. |
| 2 | mdl-mega-footer__top-section Mengidentifikasi wadah sebagai bagian atas footer. Diperlukan untuk elemen div "luar" bagian atas. |
| 3 | mdl-mega-footer__left-section Mengidentifikasi wadah sebagai bagian kiri. Diperlukan untuk elemen div "dalam" bagian kiri. |
| 4 | mdl-mega-footer__social-btn Mengidentifikasi kotak dekoratif dalam mega-footer. Diperlukan untuk elemen tombol (jika digunakan). |
| 5 | mdl-mega-footer__right-section Mengidentifikasi wadah sebagai bagian kanan. Diperlukan untuk elemen div "dalam" bagian kanan. |
| 6 | mdl-mega-footer__middle-section Mengidentifikasi wadah sebagai footer bagian tengah. Diperlukan untuk elemen div "luar" bagian tengah. |
| 7 | mdl-mega-footer__drop-down-section Mengidentifikasi wadah sebagai area konten drop-down (vertikal). Diperlukan untuk elemen div drop-down "dalam". |
| 8 | mdl-mega-footer__heading Mengidentifikasi heading sebagai heading mega-footer. Diperlukan untuk elemen h1 di dalam bagian drop-down. |
| 9 | mdl-mega-footer__link-list Mengidentifikasi daftar tidak berurutan sebagai daftar drop-down (vertikal). Diperlukan untuk elemen ul di dalam bagian drop-down. |
| 10 | mdl-mega-footer__bottom-section Mengidentifikasi wadah sebagai bagian bawah footer. Diperlukan untuk elemen div "luar" bagian bawah. |
| 11 | mdl-logo Mengidentifikasi wadah sebagai judul bagian bergaya. Diperlukan untuk elemen div "dalam" di mega-footer bagian bawah atau mini-footer bagian kiri. |
| 12 | mdl-mini-footer Mengidentifikasi wadah sebagai komponen footer mini MDL. Diperlukan untuk elemen footer. |
| 13 | mdl-mini-footer__left-section Mengidentifikasi wadah sebagai bagian kiri. Diperlukan untuk elemen div "dalam" bagian kiri. |
| 14 | mdl-mini-footer__link-list Mengidentifikasi daftar tak berurutan sebagai daftar sebaris (horizontal). Diperlukan untuk elemen ul yang bersaudara dengan elemen div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Mengidentifikasi wadah sebagai bagian kanan. Diperlukan untuk elemen div "dalam" bagian kanan. |
| 16 | mdl-mini-footer__social-btn Mengidentifikasi kotak dekoratif dalam footer mini. Diperlukan untuk elemen tombol (jika digunakan). |
Sekarang, mari kita lihat beberapa contoh untuk memahami penggunaan kelas footer MDL untuk memberi gaya footer.
Mega Footer
Mari kita bahas penggunaan file mdl-mega-footerkelas untuk menata konten di footer. Kelas MDL berikut akan digunakan dalam contoh ini.
mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-mega-footer - Mengidentifikasi kontainer sebagai komponen mega-footer MDL.
mdl-mega-footer__top-section - Mengidentifikasi wadah sebagai bagian atas footer.
mdl-mega-footer__left-section - Mengidentifikasi wadah sebagai bagian kiri.
mdl-mega-footer__social-btn - Mengidentifikasi kotak dekoratif dalam footer mini.
mdl-mega-footer__right-section - Mengidentifikasi wadah sebagai bagian kanan.
mdl-mega-footer__middle-section - Mengidentifikasi wadah sebagai footer bagian tengah.
mdl-mega-footer__drop-down-section - Mengidentifikasi wadah sebagai area konten drop-down (vertikal).
mdl-mega-footer__heading - Mengidentifikasi heading sebagai heading mega-footer.
mdl-mega-footer__link-list - Mengidentifikasi daftar yang tidak berurutan sebagai daftar sebaris (horizontal).
mdl-mega-footer__bottom-section - Mengidentifikasi wadah sebagai bagian bawah footer.
mdl-logo - Mengidentifikasi wadah sebagai judul bagian bergaya.
mdl_megafooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Footer Mini
Contoh berikut akan membantu Anda memahami penggunaan file mdl-mini-footer kelas untuk menata konten di footer.
Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.
mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-mini-footer - Mengidentifikasi wadah sebagai komponen footer mini MDL.
mdl-mini-footer__left-section - Mengidentifikasi wadah sebagai bagian kiri.
mdl-logo - Mengidentifikasi wadah sebagai judul bagian bergaya.
mdl-mini-footer__link-list - Mengidentifikasi daftar yang tidak berurutan sebagai daftar sebaris (horizontal).
mdl-mini-footer__right-section - Mengidentifikasi wadah sebagai bagian kanan.
mdl_minifooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.
Komponen lencana MDL adalah pemberitahuan di layar yang bisa berupa angka atau ikon. Biasanya digunakan untuk menekankan jumlah item.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke lencana. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-badge Mengidentifikasi elemen sebagai komponen lencana MDL. Diperlukan untuk elemen span atau link. |
| 2 | mdl-badge--no-background Menerapkan efek lingkaran terbuka ke lencana dan bersifat opsional. |
| 3 | mdl-badge--overlap Membuat lencana tumpang tindih dengan penampungnya dan bersifat opsional. |
| 4 | data-badge="value" Menetapkan nilai string ke lencana yang digunakan sebagai atribut; dibutuhkan pada span atau link. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-badge kelas untuk menambahkan notifikasi ke elemen span dan link.
Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.
mdl-badge - Mengidentifikasi elemen sebagai komponen lencana MDL.
data-badge- Menetapkan nilai string ke lencana. Ikon dapat ditetapkan menggunakan simbol HTML.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "âš‘">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke tombol. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-button Setel tombol sebagai komponen MDL, diperlukan. |
| 2 | mdl-js-button Menambahkan perilaku MDL dasar ke tombol, diperlukan. |
| 3 | (none) Setel efek tampilan datar ke tombol, default. |
| 4 | mdl-button--raised Mengatur efek tampilan yang ditinggikan; ini saling eksklusif dengan fab, mini-fab, dan icon. |
| 5 | mdl-button--fab Setel efek tampilan yang menakjubkan (melingkar); ini saling eksklusif dengan timbul, keren-mini, dan ikon. |
| 6 | mdl-button--mini-fab Setel efek tampilan mini-fab (lingkaran luar biasa kecil); ini saling eksklusif dengan timbul, menakjubkan, dan ikon. |
| 7 | mdl-button--icon Setel efek tampilan ikon (lingkaran kecil polos); ini saling eksklusif dengan mengangkat, menakjubkan, dan mini-menakjubkan. |
| 8 | mdl-button--colored Menyetel efek tampilan berwarna di mana warna didefinisikan di material.min.css. |
| 9 | mdl-button--primary Menyetel efek tampilan warna utama di mana warna ditentukan di material.min.css. |
| 10 | mdl-button--accent Menyetel efek tampilan warna aksen di mana warna ditentukan di material.min.css. |
| 11 | mdl-js-ripple-effect Set efek klik riak, dapat digunakan dalam kombinasi dengan kelas lain. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-button kelas untuk menunjukkan berbagai jenis tombol.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kartu. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-card Mengidentifikasi elemen div sebagai wadah kartu MDL, diperlukan di div "luar". |
| 2 | mdl-card--border Menempatkan batas ke bagian kartu yang diterapkan dan digunakan pada div "dalam". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Menetapkan kedalaman bayangan variabel (2, 3, 4, 6, 8, atau 16) ke kartu dan bersifat opsional, lanjutkan ke div "luar"; jika dihilangkan, tidak ada bayangan yang ditampilkan. |
| 4 | mdl-card__title Mengidentifikasi div sebagai wadah judul kartu dan diperlukan di div judul "bagian dalam". |
| 5 | mdl-card__title-text Menempatkan karakteristik teks yang sesuai untuk judul kartu dan diperlukan pada tag kepala (H1 - H6) di dalam div judul. |
| 6 | mdl-card__subtitle-text Menempatkan karakteristik teks ke subtitle kartu dan bersifat opsional. Ini harus anak dari elemen judul. |
| 7 | mdl-card__media Mengidentifikasi div sebagai wadah media kartu dan diperlukan di div media "dalam". |
| 8 | mdl-card__supporting-text Mengidentifikasi div sebagai wadah teks isi kartu dan menetapkan karakteristik teks yang sesuai ke teks isi dan diperlukan pada div teks isi "dalam"; teks langsung masuk ke dalam div tanpa wadah yang mengintervensi. |
| 9 | mdl-card__actions Mengidentifikasi div sebagai wadah tindakan kartu dan menetapkan karakteristik teks yang sesuai untuk teks tindakan dan diperlukan di div tindakan "dalam"; konten langsung masuk ke dalam div tanpa wadah yang mengintervensi. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-tooltip untuk menampilkan berbagai jenis tooltip.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis bilah kemajuan. Tabel berikut menyebutkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-js-progress Menyetel perilaku dasar MDL ke indikator kemajuan dan merupakan kelas yang diwajibkan. |
| 2 | mdl-progress__indeterminate Menyetel animasi ke indikator kemajuan dan merupakan kelas opsional. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-js-progress kelas untuk menunjukkan berbagai jenis bilah kemajuan.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis spinner. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-spinner Mengidentifikasi wadah sebagai komponen spinner MDL dan merupakan kelas yang diperlukan. |
| 2 | mdl-js-spinner Menyetel perilaku dasar MDL ke pemintal dan merupakan kelas yang diperlukan. |
| 3 | is-active Menampilkan dan menganimasikan pemintal dan bersifat opsional. |
| 4 | mdl-spinner--single-color Menggunakan satu warna, bukan mengubah warna, dan bersifat opsional. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-spinner kelas dan berbagai jenis pemintal.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis menu. Tabel berikut mencantumkan kelas yang tersedia dan efeknya
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-button Mengidentifikasi tombol sebagai komponen MDL dan diperlukan pada elemen tombol. |
| 2 | mdl-js-button Menyetel perilaku dasar MDL ke tombol dan diperlukan pada elemen tombol. |
| 3 | mdl-button--icon Setel ikon ke tombol dan diperlukan pada elemen tombol. |
| 4 | material-icons Mengidentifikasi rentang sebagai ikon material dan diperlukan pada elemen sebaris. |
| 5 | mdl-menu Mengidentifikasi wadah daftar tidak berurutan sebagai komponen MDL dan diperlukan pada elemen ul. |
| 6 | mdl-js-menu Menetapkan perilaku MDL dasar ke menu dan diperlukan pada elemen ul. |
| 7 | mdl-menu__item Mengidentifikasi tombol sebagai opsi menu MDL dan menetapkan perilaku MDL dasar, yang diperlukan pada elemen item daftar. |
| 8 | mdl-js-ripple-effect Menyetel efek klik riak ke tautan opsi dan bersifat opsional; diperlukan pada elemen daftar tidak berurutan. |
| 9 | mdl-menu--top-left Atur posisi menu di atas tombol, sejajarkan tepi kiri menu dengan tombol dan bersifat opsional; diperlukan pada elemen daftar tidak berurutan. |
| 10 | (none) Secara default, menu diposisikan di bawah tombol, sejajar dengan tepi kiri dengan tombol. |
| 11 | mdl-menu--top-right Menu diposisikan di atas tombol, sejajar dengan tepi kanan dengan tombol, opsional dan melanjutkan elemen daftar tidak berurutan. |
| 12 | mdl-menu--bottom-right menu diposisikan di bawah tombol, sejajar dengan tepi kanan dengan tombol, opsional dan melanjutkan elemen daftar tidak berurutan. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-spinner kelas untuk menunjukkan berbagai jenis pemintal.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis menu. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-slider Mengidentifikasi elemen masukan sebagai komponen MDL dan diperlukan. |
| 2 | mdl-js-slider Menetapkan perilaku MDL dasar ke elemen masukan dan diperlukan. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-slider untuk menunjukkan berbagai jenis slider.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-checkbox Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-checkbox Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-checkbox__input Setel perilaku MDL dasar ke kotak centang dan diperlukan pada elemen masukan (kotak centang). |
| 4 | mdl-checkbox__label Menetapkan perilaku MDL dasar ke teks dan diperlukan pada elemen rentang (keterangan). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (kotak centang). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-slider untuk menampilkan berbagai jenis kotak centang.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis tombol radio. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-radio Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-radio Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-radio__button Menyetel perilaku dasar MDL ke radio dan diperlukan pada elemen masukan (tombol radio). |
| 4 | mdl-radio__label Menetapkan perilaku MDL dasar ke teks dan diperlukan pada elemen rentang (keterangan). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (tombol radio). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-slider untuk menampilkan berbagai jenis tombol radio.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang sebagai ikon. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-icon-toggle Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-icon-toggle Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-icon-toggle__input Setel perilaku dasar MDL ke ikon-toggle dan diperlukan pada elemen input (icon-toggle). |
| 4 | mdl-icon-toggle__label Menetapkan perilaku MDL dasar ke teks dan diperlukan pada elemen i (ikon). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (icon-toggle). |
Contoh
Contoh berikut menunjukkan penggunaan mdl-icon-toggle kelas untuk menampilkan berbagai jenis kotak centang sebagai ikon.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang sebagai sakelar. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-switch Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-switch Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-switch__input Menyetel perilaku dasar MDL untuk beralih dan diperlukan pada elemen masukan (sakelar). |
| 4 | mdl-switch__label Menyetel perilaku dasar MDL ke keterangan dan diperlukan pada elemen masukan (keterangan). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (sakelar). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-switch dan berbagai jenis kotak centang sebagai switch.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan tabel sebagai tabel data. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-data-table Mengidentifikasi tabel sebagai komponen MDL dan diperlukan pada elemen tabel. |
| 2 | mdl-js-data-table Menetapkan perilaku MDL dasar ke tabel dan diperlukan pada elemen tabel. |
| 3 | mdl-data-table--selectable Menetapkan semua / perilaku individu yang dapat dipilih (kotak centang) dan bersifat opsional; berlangsung pada elemen tabel. |
| 4 | mdl-data-table__cell--non-numeric Mengatur pemformatan teks ke sel data dan bersifat opsional; berjalan di header tabel dan sel data tabel. |
| 5 | (none) Secara default, setel pemformatan numerik ke header atau sel data. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-data-table kelas untuk menunjukkan tabel data.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis input teks. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-textfield Mengidentifikasi wadah sebagai komponen MDL dan diperlukan pada elemen div "luar". |
| 2 | mdl-js-textfield Menyetel perilaku dasar MDL ke masukan dan diperlukan di elemen div "luar". |
| 3 | mdl-textfield__input Mengidentifikasi elemen sebagai input textfield dan diperlukan pada input atau elemen textarea. |
| 4 | mdl-textfield__label Mengidentifikasi elemen sebagai label bidang teks dan diperlukan pada elemen label untuk elemen input atau area teks. |
| 5 | mdl-textfield--floating-label Menerapkan efek label mengambang dan bersifat opsional; berlangsung di elemen div "luar". |
| 6 | mdl-textfield__error Mengidentifikasi span sebagai pesan kesalahan MDL dan bersifat opsional; melanjutkan elemen span untuk elemen input MDL dengan pola. |
| 7 | mdl-textfield--expandable Mengidentifikasi div sebagai wadah bidang teks yang dapat diperluas MDL; digunakan untuk kolom masukan yang dapat diperluas, dan diperlukan di elemen div "luar". |
| 8 | mdl-button Mengidentifikasi label sebagai tombol ikon MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 9 | mdl-js-button Menetapkan perilaku dasar ke wadah ikon; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 10 | mdl-button--icon Mengidentifikasi label sebagai wadah ikon MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 11 | mdl-input__expandable-holder Mengidentifikasi wadah sebagai komponen MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen div "dalam". |
| 12 | is-invalid Mengidentifikasi textfield sebagai tidak valid pada pemuatan awal dan bersifat opsional pada elemen mdl-textfield. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-textfield untuk menunjukkan berbagai jenis bidang teks.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis tooltips. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-tooltip Mengidentifikasi wadah sebagai tooltip MDL dan diperlukan pada elemen wadah tooltip. |
| 2 | mdl-tooltip--large Mengatur efek font besar dan bersifat opsional; melanjutkan elemen penampung tooltip. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-tooltip kelas untuk menunjukkan berbagai jenis tooltips.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.