Menggunakan Metode class Chips Pada Materialize

Halo teman – teman, selamat datang kembali di website tips dan triik Dumet School. Masih melanjutnkan pembahasan tentang framework css materialize, pada tahap saat ini kita akan implementasikan salah satu fungsi class pada materialize yaitu Menggunakan Metode class Chips Pada Materialize. Dimana hasil dari tampilannya seperti gambar di bawah ini

Bisa teman – teman lihat pada gambar di atas ini hasil dari class chips ini menghasilkan sebuah tag kontent, kita juga dapat memberikan close pada buttonnya. Biasanya ini digunakan untuk mewakili sebuah konten atau memberikan pilihan kepada user, jika user tidak memilih bisa langsung klik icon close. Selain itu kita akan implementasikan beberapa class yang dimiliki chips yaitu chips-initial, chips-placeholder, chips-autocomplete dan nanti teman – teman bisa lihat hasil dari masing – masing fungsi class tersebut. Oke langsung 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="Contact Person">
			    Dumet School
			</div>
			<div class="chip">
				Tag
				<i class="close material-icons">close</i>
			</div>
 		</div>
	</div>
</div>

Pastekan pada file index.html nya, untuk image teman – teman boleh pakai image yang lain dengan ukuran 150 x 150px.

Maka hasilnya

Selanjutnya kita akan membuat 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 juga dapat menampilkan chips pada tag input dengan tambahan script jQuery nya

Untuk 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

Jika sudah save dan refresh pada browsernya

Dan hasilnya cukup keren, bisa menjadi refrensi untuk kalian yang ingin explore kemampuannya untuk membuat sebuah layout yang bagus. Sekian pada artikel kali ini tentang Menggunakan Metode class Chips Pada Materialize kita jumpa kembali pada artikel yang datang. Terimakasih dan sampai Jumpa, Semoga bermanfaat.

Menggunakan Metode class Chips Pada Materialize

Kategori