Membuat Tombol Toast dengan Materialize

Materialize CSS adalah salah satu framework css yang cukup populer selain Bootstrap. Keunggulan framework ini adalah adanya beberapa fungsi yang sangat interaktif, mulai dari hover hingga fitur javascript dari materializenya. Salah satu fungsi javascript yang bisa kita gunakan adalah fungsi toast. Ya, kita akan mempelajari bagaimana cara membuat tombol toast dengan materialize.  Caranya cukup mudah, jika kalian menggunakan framework css biasanya pada situs resmi sudah dicantumkan dokumentasi secara lengkap. Atau jika kalian bingung mulai dari mana kalian bisa ikuti langkah berikut ini.

Sebelum menggunakan framework ada poin penting yang harus kalian pahami. Pertama adalah tentu kalian harus sudah paham struktur html seperti apa. Lalu yang kedua adalah penggunaan CSS yang sudah mahir juga. Karena sebenarnya framework ini adalah hanya file CSS yang sudah dikembangkan oleh suatu tim agar dapat digunakan oleh banyak orang tanpa perlu tahu CSSnya seperti apa.

Oke selanjutnya untuk membuat tombol toast ini yang harus kalian lakukan adalah membuat tampilanya terlebih dahulu baru tentukan fitur apa yang ingin dimasukan kedalam website kita. Untuk mempersingkat waktu kalian bisa salin contoh code dibawah ini.

toast.html

<!DOCTYPE html>
<html>
<head>
	<title>Toast Materialize CSS</title>
	<!-- Compiled and minified CSS -->
  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  	<!-- Compiled and minified JavaScript -->
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
</head>
<body>
	<div class="container" style="margin-top: 50px;">
		<h1>Ini adalah tombol Toast</h1>
		<a class="btn" onclick="Materialize.toast('Hallo ini toast', 4000)">Toast!</a>
	</div>
</body>
</html>

Setelah sudah kalian bisa simpan file tersebut dengan format html. Untuk melihat hasilnya kalian cukup buka file tersebut pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti berikut,

membuat-tombol-toast-dengan-materialize-rangga1-150817

Gambar diatas adalah tampilan awalnya. Saat tombol berwarna hijau tersebut kalian klik, maka akan muncul tulisan seperti gambar dibawah ini.

membuat-tombol-toast-dengan-materialize-rangga2-150817

Disebelah kanan akan muncul tulisan dengan bentuk kotak seperti halnya notifikasi pada website. Seperti itu kira kira penggunaan toast. Kalian bisa buat lebih kompleks lagi sesuai dengan kebutuhan website kalian.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat tombol toast dengan materialize. Semoga bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada pembahasan artikel menarik dan tak kalah seru lagi lainya.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *