Metode Card class Pada Framework CSS Materialize

Selamat datang kembali di website tips dan trik Dumet School, pada sampai saat ini kita masih lanjut membahas tentang framework css materialize. Dan di kesempatan kali ini kita akan belajar tentang Metode Card class Pada Framework CSS Materialize dimana hasil output nya akan menghasilkan seperti sebuah kartu, selain itu kita menambahkan image untuk membuat sebuah layout seperti product. Kali ini kita akan implementasikan Card Reveal dan Tabs in Cards

Dibawah ini adalah hasil layout dari card reveal

dan di bawah ini adalah hasil dari tabs in card

Lanjut pada artikel kali ini tentang Metode Card class Pada Framework CSS Materialize teman – teman siapkan file materialize nya kemudian copy script html nya di bawah ini

<div class="row">
    <div class="col s4">
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="products.png">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Judul Product<i class="material-icons right">more_vert</i></span>
          <p><a href="#">Keranjang Belanja</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title orange-text text-darken-3">Harga<i class="material-icons right">close</i></span>
          <p><a href="">Rp.500.000,-</a></p>
        </div>
      </div>
    </div>
</div

Pastekan pada file index.html nya, save dan jalankan pada browsernya

Kemudian klik pada icon sebelah kanan judul product

Kita custom sedikit css nya

<style type="text/css">
 .card .card-reveal{
 padding: 24px;
 position: absolute;
 background-color: #0e80ff66;
 width: 100%;
 overflow-y: auto;
 left: 0;
 top: 131%;
 height: 100%;
 z-index: 3;
 display: none;
 }
 .card .card-reveal a{color:#fff;}
 </style>

Maka hasilnya seperti hambar di bawah ini

Kemudian berikutnya kita implementasikan tab card nya

<div class="row">
    <div class="col">
      <div class="card">
        <div class="card-content">
          <p>Tabs Information</p>
        </div>
        <div class="card-tabs">
          <ul class="tabs tabs-fixed-width">
            <li class="tab"><a href="#test4">Information 1</a></li>
            <li class="tab"><a class="active" href="#test5">Information 3</a></li>
            <li class="tab"><a href="#test6">Information 3</a></li>
          </ul>
        </div>
        <div class="card-content grey lighten-4">
          <div id="test4">Content Information 1</div>
          <div id="test5">Content Information 2</div>
          <div id="test6">Content Information 3</div>
        </div>
      </div>
    </div>
  </div>

Save dan refresh pada browsernya, maka tabs card berhasil di buat

Kemudian di masing – masing information dapat di klik dan mempunyai content yang berbeda, inilah hasil dari card class yang di sediakan oleh framework ini. Dapat kita gunakan untuk membuat layout website yang berfariatif. Teman – teman juga bisa di kembangkan lagi dari hasil latihan kali ini supaya semakin mahir dalam menggunakan framework css nya.

Sekian pada artikel kali ini tentang Metode Card class Pada Framework CSS Materialize kita jumpa kembali pada artikel yang akan datang. terimakasih dan sampai jumpa.

Metode Card class Pada Framework CSS Materialize

Kategori