Gila Material - Template Components
Komponen yang tersedia di template Gila Material.
Mulailah dengan lebih dari selusin komponen Gila Material yang dapat digunakan kembali dengan gaya peningkatan dan komponen serta opsi tambahan.
Table of Contents
Alerts
Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa.
Alert Variants
Alert memiliki dua varian yang berbeda:
A simple default alert—check it out!
A simple outlined alert—check it out!
<div class="gila_material_alert">
<div class="alert_message">
A simple default alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_outline">
<div class="alert_message">
A simple outlined alert—check it out!
</div>
</div>Alert with Solid Background
Varian gaya latar belakang yang solid. Gunakan salah satu dari empat gaya di bawah ini:
A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out!
<div class="gila_material_alert alert_info">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>Alert with Outline Style
Varian gaya outline dengan border. Gunakan salah satu dari empat gaya di bawah ini:
A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out!
<div class="gila_material_alert alert_info alert_outline">
<div class="alert_message">
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning alert_outline">
<div class="alert_message">
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success alert_outline">
<div class="alert_message">
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error alert_outline">
<div class="alert_message">
A simple error alert—check it out!
</div>
</div>Alert with Description Solid Background
Anda bisa menggunakan alert dengan isi konten deskripsi:
Info
A simple info alert—check it out!
Warning
A simple warning alert—check it out!
Success
A simple success alert—check it out!
Error
A simple error alert—check it out!
<div class="gila_material_alert alert_info">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>Alert with Description Outline Style
Anda bisa menggunakan alert dengan isi konten deskripsi gaya outline:
Info
A simple info alert—check it out!
Warning
A simple warning alert—check it out!
Success
A simple success alert—check it out!
Error
A simple error alert—check it out!
<div class="gila_material_alert alert_info alert_outline">
<div class="alert_message">
<strong>Info</strong>
A simple info alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_warning alert_outline">
<div class="alert_message">
<strong>Warning</strong>
A simple warning alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_success alert_outline">
<div class="alert_message">
<strong>Success</strong>
A simple success alert—check it out!
</div>
</div>
<div class="gila_material_alert alert_error alert_outline">
<div class="alert_message">
<strong>Error</strong>
A simple error alert—check it out!
</div>
</div>Button
Button adalah elemen yang dapat diklik yang digunakan untuk memicu tindakan. Mereka mengomunikasikan ajakan bertindak kepada pengguna dan memungkinkan pengguna berinteraksi dengan halaman dalam berbagai cara. Label tombol mengungkapkan tindakan apa yang akan terjadi ketika pengguna berinteraksi dengannya.
Button Variants
Button memiliki empat varian yang berbeda:
Default Button Outline Button Unelevated Button Raised Button<a class="gila_material_button" href="#">Default Button</a>
<a class="gila_material_button outline" href="#">Outline Button</a>
<a class="gila_material_button unelevated" href="#">Unelevated Button</a>
<a class="gila_material_button raised" href="#">Raised Button</a>Button Shapes
Button dapat memiliki bentuk tambahan:
Default Button Rounded Button<a class="gila_material_button unelevated" href="#">Default Button</a>
<a class="gila_material_button unelevated rounded" href="#">Rounded Button</a>Button Disabled
Button jika tidak ada tindakan:
Default Button Disabled Outline Button Disabled Unelevated Button Disabled Raised Button Disabled Rounded Button Disabled<a class="gila_material_button disabled" href="#">Default Button Disabled</a>
<a class="gila_material_button outline disabled" href="#">Outline Button Disabled</a>
<a class="gila_material_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="gila_material_button raised disabled" href="#">Raised Button Disabled</a>
<a class="gila_material_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>Button with Icons
Buat Button dengan icon hanya menambahkan Icon SVG:
Download<a class="gila_material_button unelevated rounded" href="#">
<svg viewbox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
</svg>
Download
</a>Table
Menggunakan markup tabel paling dasar, inilah tampilan Tabel. Semua gaya tabel diwarisi, artinya setiap tabel bersarang akan ditata dengan cara yang sama seperti induknya.
| No. | Nama | Jenis Kelamin | Kota | Hobi |
|---|---|---|---|---|
| 1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
| 2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gila_material_table">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Table Head Options
Gunakan pilihan dari empat class ini untuk mengubah warna Tabel Head: table_primary, table_warning, table_success, and table_error.
| No. | Nama | Jenis Kelamin | Kota | Hobi |
|---|---|---|---|---|
| 1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
| 2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gila_material_table">
<table class="table_primary">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Table with Striped Rows
Gunakan class table_stripped untuk menambahkan zebra-striping ke baris tabel mana pun di dalam tbody.
| No. | Nama | Jenis Kelamin | Kota | Hobi |
|---|---|---|---|---|
| 1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
| 2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gila_material_table">
<table class="table_stripped">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Table with Hoverable Rows
Gunakan class table_hovered untuk mengaktifkan efek hover pada baris tabel dalam tbody.
| No. | Nama | Jenis Kelamin | Kota | Hobi |
|---|---|---|---|---|
| 1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
| 2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gila_material_table">
<table class="table_hovered">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Table Sticky
Gunakan class table_sticky untuk menggunakan tabel sticky
| No. | Nama | Jenis Kelamin | Kota | Hobi |
|---|---|---|---|---|
| 1 | Ishar Yulian Satriani | Laki-laki | Pandeglang, Banten | Membuat design template Blogger |
| 2 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 3 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 4 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 5 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 6 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
| 7 | Tidak ada data. | Tidak ada data. | Tidak ada data. | Tidak ada data. |
<div class="gila_material_table table_sticky">
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Kota</th>
<th>Hobi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ishar Yulian Satriani</td>
<td>Laki-laki</td>
<td>Pandeglang, Banten</td>
<td>Membuat design template Blogger</td>
</tr>
<tr>
<th>2</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>3</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>4</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>5</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>6</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
<tr>
<th>7</th>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
<td>Tidak ada data.</td>
</tr>
</tbody>
</table>
</div>Accordion/Collapsible Panel
Contoh:
Collapse 1 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse 2 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse 3 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="gila_material_collapse">
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 1 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 2 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="collapse_panel">
<div class="collapse_header">
<div class="collapse_title">Collapse 3 - Click Me!</div>
</div>
<div class="collapse_content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>Blockquote
Gunakan blockquote dengan span, small atau footer.
Gila Temax selalu berusaha memberikan yang terbaik untuk Anda. ~ Gila Material
<blockquote>
Gila Temax selalu berusaha memberikan yang terbaik untuk Anda.
<span>~ Gila Material</span>
</blockquote>Pre code Tag
Tag pre code telah disertakan dalam template Gila Material. Jika teksnya HTML jangan lupa untuk mem-parse teks menggunakan HTML Parse Tool.
Di bawah ini adalah kombinasi tag pre dengan tag code dan menambahkan judul ke tag pre seperti di bawah ini:
<div class="gila_material_highlight_wrap">
<pre data-lang="yout-title-here"><code>Your code here</code></pre>
</div>Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample HTML</title>
</head>
<body>
<p>Sample Text</p>
</body>
</html>body{font-size:14px;font-weight:400;color:inherit;}$('#mybutton').click(function() {
$(this).toggleClass('active');
});Di bawah ini seperti dokumen angular.io:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My First Angular App!';
}Manual Related Post
Manual Related Post dapat digunakan untuk membuat artikel terkait dalam postingan secara manual.
Contoh:
<div class="manual_related_post">
<a href="#">
Gila Material - Template Components
<span>Related Article</span>
</a>
</div>Media
Gunakan class="media_player" untuk membuat embed, iframe, dan object yang responsif.
<div class="media_player">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/vRfeVakXU-0" title="YouTube video player"></iframe>
</div>Post Reference
Untuk menambahkan daftar referensi artikel yang Anda tulis:
Referensi:
https://gilamaterial.blogspot.com/
<p class="post_reference">
Referensi:
<br />
https://gilamaterial.blogspot.com/
</p>Misc
Berikut ini adalah komponen lain yang berguna untuk digunakan.
Table of Contents
Dengan JavaScript, secara otomatis membuat Daftar Isi ke postingan Anda. Ini akan berfungsi jika postingan Anda menyertakan heading h2 dan h3.
Berikut kode TOC yang dapat Anda gunakan secara manual:
<div class="toc_wrap">
<div class="toc_title">
Table of Contents
</div>
<div id="toc_content"></div>
</div>
Semua komponen yang ada disini akan diupdate jika tersedia.
Tags:
Documentation
Suara kura-kura
Wanpedia