Metode Card class Pada Framework CSS Materialize

Selamat datang kembali di situs tips dan trik Source Code Aplikasi, di hingga dikala ini kita masih lanjut membahas mengenai framework css materialize. Dan di kesempatan kali ini kita akan belajar mengenai Metode Card class Pada Framework CSS Materialize dimana hasil output nya akan menghasilkan seperti sebuah kartu, selain itu kita menambahkan image bagi membangun sebuah layout seperti product. Kali ini kita akan implementasikan Card Reveal dan Tabs in Cards

Dibawah ini ialah hasil layout dari card reveal

dan di bawah ini ialah hasil dari tabs in card

Lanjut di artikel kali ini mengenai 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 di file index.html nya, save dan jalankan di browsernya

Kemudian klik di icon sebelah kanan judul product

Kita modifikasi 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>

Karenanya 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 di browsernya, karenanya tabs card berhasil di bikin

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 bagi membangun layout situs yang berfariatif. Teman – teman pun dapat di kembangkan lagi dari hasil latihan kali ini supaya semakin mahir pada menggunakan framework css nya.

Demikian di artikel kali ini mengenai Metode Card class Pada Framework CSS Materialize kita jumpa kembali di artikel yang akan datang. terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org