Materialize Chips: Chips are basically small blocks which are used to represent the small piece of information. Chips are used basically for tags or contacts. It is very easy to create chips in Materialize framework. Here in this tutorial we are going to explain how you can create chips in Materialize framework.
Materialize Chips Example
There are basically two types of Chips in Materialize-
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:
If you run the above example it will produce the output something like this –
Create div with class chip add tag name and close icon simply as below –
Materialize Tag Chip Example:
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 –
Let us Learn More about the Materialize Chips.
If you run the above example it will produce output something like this –
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
- 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:
Materialize Chips Delete Event
This event will be called when you delete a chip –
Materialize Chips delete tag Event Example:
Materialize Chips Select Event
This event will be called when you select a chip –
Materialize Chips select chip | tag Example:
If you want to get the stored data of chip you can use the following method –
Materialize Get Chip Data Example: