Menggunakan Metode class Chips Pada Materialize

Halo teman – teman, selamat datang kembali di situs tips dan triik Source Code Aplikasi. Masih melanjutnkan pembahasan mengenai framework css materialize, di tahap ketika ini kita akan implementasikan diantara kegunaan class di materialize yaitu Menggunakan Metode class Chips Pada Materialize. Dimana hasil dari tampilannya seperti gambar di bawah ini

Dapat teman – teman lihat di gambar di atas ini hasil dari class chips ini menghasilkan sebuah tag kontent, kita pun dapat memberikan close di buttonnya. Biasanya ini digunakan bagi mewakili sebuah konten atau memberikan alternatif kepada user, bila user tak memilih dapat seketika klik icon close. Selain itu kita akan implementasikan beberapa class yang dimiliki chips yaitu chips-initial, chips-placeholder, chips-autocomplete dan nanti teman – teman dapat lihat hasil dari masing – masing kegunaan class tersebut. Oke seketika saja kita implementasikan Menggunakan Metode class Chips Pada Materialize teman – teman siapkan file materialize nya dan copy script html nya di bawah ini

<div class=container>
<div class=row>
<div class=col l12>
<br>
<div class=chip>
    <img src=dumet.jpg alt= selamat datang kembali di situs tips dan triik  Menggunakan Cara class Chips Di Materialize>
    Source Code Aplikasi
</div>
<div class=chip>
Tag
<i class=close material-icons>close</i>
</div>
 </div>
</div>
</div>

Pastekan di file index.html nya, bagi image teman – teman boleh gunakan image yang lain dengan ukuran 150 x 150px.

Karenanya hasilnya

Berikutnya kita akan merancang sebuah form input dengan menggunakan class chips-initial, chips-placeholder, chips-autocomplete

<form action= method=>
    <br>
    <p class=caption>Name Product</p>
    <div class=chips chips-initial>
      <input id= class=input>
    </div>
    <br>
    <p class=caption>Address</p>
    <div class=chips chips-placeholder>
      <input id= class=input placeholder=Enter Youre Addres>
    </div>
    <br>
    <p class=caption>Contact Us</p>
    <div class=chips chips-autocomplete>
      <input id= class=input>
    </div>
    <button class=btn waves-effect waves-light type=submit name=action>Submit Product
    <i class=material-icons right>send</i>
    </button>
</form>

Kita pun dapat menampilkan chips di tag input dengan tambahan script jQuery nya

Bagi class chips-initial kita tambahkan script jQuery nya

<script type=text/javascript>
 
 $('.chips').material_chip();
 $('.chips-initial').material_chip({
 data: [{
 tag: 'Apple',
 }, {
 tag: 'Samsung',
 }, {
 tag: 'Nokia',
 }, {
 tag: 'Siaomi'
 }],
 });
 $('.chips-placeholder').material_chip({
 placeholder: 'Enter a tag',
 secondaryPlaceholder: '+Tag',
 });
 $('.chips-autocomplete').material_chip({
 autocompleteOptions: {
 data: {
 'Apple': null,
 'Samsung': null,
 'Nokia': null,
 'Siaomi': null
 },
 limit: Infinity,
 minLength: 1
 }
 });
 
 </script>

Letakkan script di atas ini tepat di bawah link materialize.min.js nya

Sekiranya telah save dan refresh di browsernya

Dan hasilnya lumayan keren, dapat menjadi refrensi bagi kalian yang ingin explore kemampuannya bagi merancang sebuah layout yang bagus. Sekianlah di artikel kali ini mengenai Menggunakan Metode class Chips Pada Materialize kita jumpa kembali di artikel yang datang. Terimakasih dan hingga Jumpa, Semoga bermanfaat.

Sumber https://kursuswebsite.org