Cara Membuat Chips Card dengan Framework Materialize.css

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana CARA MEMBUAT CHIPS CARD Dengan Framework Materialize.css teman teman pernah mengirim email dengan gmail, pasti ketika kita masukkan nama email yang kita ingin tuju dengan otomatis nama email tersebut akan keblog, nah itu yang saya ingin ajarkan di sini .

Caranya cukup mudah, teman-teman bisa copy script di bawah ini yah :

<head>
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

<body>
      <div class="chips chips-placeholder"></div>
    </body>

javascript :

<script>
      $('.chips').material_chip();
  $('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });
  $('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });

  var chip = {
    tag: 'chip content',
    image: '', //optional
    id: 1, //optional
  };
    </script>

jika sudah di salin jangan lupa disave yah kemudian jalankan di browser lihat tampilannya .

Cukup mudah bukan?kita telah selesai menyelesaikan tentang Bagaimana CARA MEMBUAT CHIPS CARD Dengan Framework Materialize.css, sampai jumpa di artikel selanjutnya yah ..

Selamat mencoba..

#KeepLearn

#IsmetMA