Macam - macam class button dan Fungsi Breadcrumbs Materialize

Selamat datang kembali di website tips dan trik Dumet School, lanjut pada pembahasan framework css materialize. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Macam – macam class button dan Fungsi Breadcrumbs Materialize dimana beberapa fungsi wajib teman – teman ketahui. Di latihan kali ini kita akan mengenal beberapa class button pada materialize, kemudian metode implementasi Breadcrumbs berguna untuk menentukan posisi halaman berada. Pada umumnya framework css semuanya sama namun dalam pengimplementaiannya saja yang berbeda, seperti framework materialize ini. Juga memiliki class – class tersendiri yang wajib kita tahu dalam pembuatan layout website, Di bawah ini adalah macam – macam button yang di sediakan oleh framework ini

Untuk 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

Bisa kalian lihat class btn-large hasil outputnya button yang paling besar, kemudian class btn memiliki tampilan seperti gambar di atas ini yang ada di nomor 2, kemudian class button-flat memiliki hasil tampilan tidak mempunyai beckground, kemudian kita juga bisa kombinasikan icon pada button misalkan saya kasih icon add

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

Maka akan menghasilkan button dengan icon add

Lanjut pada artikel kali ini tentang Macam – macam class button dan Fungsi Breadcrumbs Materialize,selain itu kita bisa juga memberikan fungsi class disabled yang akan membuat button di disable

Maka hasil outputnya seperti gambar di bawah ini

Berikutnya fungsi Breadcrumbs untuk membuat output lokasi user berada, misanya saya ingin menampilkan home > gallery > show, maka kita akan buat 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 untuk memberitahuan user berada di halaman user berada pada saat berkunjung di website kita. Sekian pada artikel kali ini tentang Macam – macam class button dan Fungsi Breadcrumbs Materialize kita jumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan menambah pengetahuannya tentang framework ini, terimakasih dan sampai jumpa.

Macam – macam class button dan Fungsi Breadcrumbs Materialize

Kategori