Materialize Chips

Materialize Chips Example: Chips are basically small blocks which are used to represent the small piece of information. Chips are used basically for tags or contacts. Class “chips” is used to define chips. It is very easy to create chips in MaterializeCss framework. Here in this tutorial we are going to explain how you can create chips in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Chips Example – MaterializeCss

There are basically two types of Chips in MaterializeCss-

• Contacts
• Tags

Contacts

To create contact chip just wrap image by div container and add class “chip” to the div. Here is an example of contact chip-

<div class="chip">
    <amp-img src="http://tutorialsplane.com/runtest/ionic/img/profile.jpg" alt="Contact Chip" class="amp-wp-inline-d060dbe952cf35d13913821c13ad18cc amp-wp-enforced-sizes" width="279" height="279" sizes="(min-width: 279px) 279px, 100vw"></amp-img>
    David
</div>

If you run the above example it will produce the output something like this –

Tags

Create div with class chip add tag name and close icon simply as below –

 <div class="chip">
    Tag Name
    <i class="close material-icons">close</i>
  </div>                                                                                                                                                                                                                                                  

We can add close button in chips using class close material-icons. When you click on the close icon chip will be automatically closed. If you run the above example it will produce the output something like this –

JavaScript Plugin Usage

Let us create dynamic Chips using JavaScript Plugin.

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

If you run the above example it will produce output something like this –

Options

Following Options are available in jQuery Plugin-

• data(array): You can use this to set the chip data.
• placeholder(string): This is used to show the primary placeholder for Adding tags.
• secondaryPlaceholder(string): This is used to show second placeholder when adding additional tags
• autocompleteData(object): This is used to set the autocomplete data.
• autocompleteLimit(int): You can use this to set the autocomplete Limit.

Events

• chips.add : This method is triggered when a chip is added.
• chips.delete : This method is triggered when a chip is deleted.
• chips.select : This method is triggered when a chip is selected.

Now Let us create example to understand the above events –

Materialize Chips Add Event

Here is an example of add event in Materialize Chips. This event will be called when you add a tag in chip –

     $('.chips').on('chip.add', function(e, chip){
      alert("You Have added chip");
     });                                                                                                                                                                                                                                      

Materialize Chips Delete Event

This event will be called when you delete a chip –

     $('.chips').on('chip.delete', function(e, chip){
      alert("Do you want to delete this chip");
     });
                                                                                                                                                                                                                                      

Materialize Chips Select Event

This event will be called when you select a chip –

     $('.chips').on('chip.select', function(e, chip){
      alert("You Have Selected chip");
     });
                                                                                                                                                                                                                                      

Methods

If you want to get the stored data of chip you can use the following method –

     var chip_data = $('.chips-initial').material_chip('data');