Implementasi Metode Button Pada Framework Materialize

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, hadir kembali artikel mengenai framework materialize. Ya, teman – teman telah tahu bukan selain framework ini dirancang oleh google tampilan dari hasil framework ini dapat dibilang lumayan atraktif dan betul-betul user friendly sekali. Karena beberapa efek ada setiap kegunaan nya, seperti cara – cara yang kita bahas di artikel sebelumnya. Di pembahasan kali ini kita akan Implementasi Metode Button Pada Framework Materialize dimana ada beberapa button, di postingan ini saya ingin mengenalkan sebuah button sekaligus dapat menjadi navigation bagi tampilan mobile. Bagi lebih jelasnya teman – teman dapat lihat gambar di bawah ini

Secara default button fitur ada di posisi bawah kanan, ketika di klik karenanya akan muncul fitur icon

Oke seketika saja kita implementasikan Implementasi Metode Button Pada Framework Materialize teman – teman siapkan file materialize nya, kemudian kita akan membangun sebuah button sederhana terlebih dahulu

Disini saya mempunyai script bagi headernya

Kemudian saya kustom sedikit css nya,

Berikutnya kita bikin sebuh button, di umumnya button mempunyai tampilan default

Kemudian kita tambahkan class btn di tag buttonnya

Hasil sebuah button default class btn

Bagi merubah background silahkan teman – teman ganti sesuai selera dengan memasukkan class color nya, berikutnya kita akan membangun sebuah button navigation teman – teman copy script html nya di bawah ini

<div class=row>
  <div class=col s12 m8 l12 >
<div class=fixed-action-btn vertical click-to-toggle>
    <a class=btn-floating btn-large red tooltipped data-delay=50 data-position=left data-tooltip=Click Navigation>
      <i class=material-icons>fitur</i>
    </a>
    <ul>
      <li><a class=btn-floating red tooltipped data-delay=30 data-position=left data-tooltip=Home><i class=material-icons>home</i></a></li>
      <li><a class=btn-floating yellow darken-1 tooltipped data-delay=50 data-position=left data-tooltip=Gallery Image><i class=material-icons>photo_library</i></a></li>
      <li><a class=btn-floating green tooltipped data-delay=50 data-position=left data-tooltip=Contact Us><i class=material-icons>contacts</i></a></li>
      <li><a class=btn-floating blue tooltipped data-delay=50 data-position=left data-tooltip=Shopping Cart><i class=material-icons>shopping_cart</i></a></li>
    </ul>
  </div> 
</div>
</div>

Pastekan di file index nya, save dan refresh di browsernya, karenanya button navigation nya berhasil kita bikin

Sekiranya di klik karenanya navigation atau fitur akan muncul

Menarik sekali bukan..??

Demikian di artikel kali ini mengenai Implementasi Metode Button Pada Framework Materialize bagi pembahasan lanjutnya kita bahas di artikel yang akan datang, semoga bermanfaat. Terimakasih dan hingga jumpa.

 

Sumber https://kursuswebsite.org