Macam – macam class button dan Fungsi Breadcrumbs Materialize

Selamat datang kembali di blog tips dan trik Source Code Aplikasi, lanjut di pembahasan framework css materialize. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Macam – macam class button dan Fungsi Breadcrumbs Materialize dimana beberapa kegunaan wajib teman – teman ketahui. Di latihan kali ini kita akan mengenal beberapa class button di materialize, kemudian cara implementasi Breadcrumbs bermanfaat bagi menentukan posisi halaman berada. Di umumnya framework css semuanya sama namun pada pengimplementaiannya saja yang berbeda, seperti framework materialize ini. Pun mempunyai class – class tersendiri yang wajib kita tahu pada penyusunan layout blog, Di bawah ini ialah macam – macam button yang di sediakan oleh framework ini

Bagi menghasilkan button di atas kita hanya perlu mengetikkan script seperti di bawah ini

<a class=btn-large>Button</a>
<a class=btn>Button</a>
<a class=btn-flat>Button</a>

Secara default hasil tampilannya seperti gambar di bawah ini

Dapat kalian lihat class btn-large hasil outputnya button yang sangat besar, kemudian class btn mempunyai tampilan seperti gambar di atas ini yang terdapat di nomor 2, kemudian class button-flat mempunyai hasil tampilan tak mempunyai beckground, kemudian kita pun dapat kombinasikan icon di button misalkan saya kasih icon add

<a class=btn-floating ><i class=material-icons>add</i></a>

Karenanya akan menghasilkan button dengan icon add

Lanjut di artikel kali ini mengenai Macam – macam class button dan Fungsi Breadcrumbs Materialize,selain itu kita dapat pun memberikan kegunaan class disabled yang akan membangun button di disable

Karenanya hasil outputnya seperti gambar di bawah ini

Berikutnya kegunaan Breadcrumbs bagi membangun output lokasi user berada, misanya saya ingin menampilkan home > gallery > show, karenanya kita akan bikin script nya seperti di bawah ini

<nav>
    <div class=nav-wrapper>
      <div class=col s12>
        <a href=#! class=breadcrumb>Home</a>
        <a href=#! class=breadcrumb>Gallery</a>
        <a href=#! class=breadcrumb>Show</a>
      </div>
    </div>
</nav>

Dengan memberikan class breadcrumb akan menghasilkan seperti gambar di bawah ini

Lebih ke arah navigation ya teman – teman, kita gunakan layout ini bagi memberitahuan user berada di halaman user berada di ketika berkunjung di blog kita. Demikian di artikel kali ini mengenai Macam – macam class button dan Fungsi Breadcrumbs Materialize kita jumpa kembali di artikel yang akan datang. Semoga bermanfaat dan menambah pengetahuannya mengenai framework ini, terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org