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-

Materialize Contact Chip Example:

<div class="chip">
    <img src="http://tutorialsplane.com/runtest/ionic/img/profile.jpg" style="height:30px;width:30px;" alt="Contact Chip">
    David
</div>

Try it »

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

Materialize Chips Example: Contact Chip

Tags

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

Materialize Tag Chip Example:

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

Try it »

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 –

Materialize Tag Chip Example

Learn More

Let us Learn More about the Materialize Chips.


JavaScript Plugin Usage

Let us create dynamic Chips using JavaScript Plugin.

Materialize Tag Chip JavaScript Dynamic Example:

 <div class="chips"></div>
  <div class="chips chips-initial"></div>
  <div class="chips chips-placeholder"></div>
  <script>
  $('.chips').material_chip();
  $('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Banana',
    }, {
      tag: 'Mango',
    }],
  });
  $('.chips-placeholder').material_chip({
    placeholder: 'Enter tag Name',
     secondaryPlaceholder: '+Tag',
  });
  </script>                                                                                                                                                                                                                                           

Try it »

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

Materialize Tag Chip JavaScript Dynamic Example & Demo Online

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 –

Materialize Chips Add Event Example:

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

Try it »

Materialize Chips Delete Event

This event will be called when you delete a chip –

Materialize Chips delete tag Event Example:

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

Try it »

Materialize Chips Select Event

This event will be called when you select a chip –

Materialize Chips select chip | tag Example:

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

Try it »

Methods

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

Materialize Get Chip Data Example:

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

Advertisements

Add Comment

📖 Read More