Materialize CSS
  Prev Page
Next Page  
Materialize Chips
Materialize CSS Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
Contacts

Are you create a contact chip just add an img inside.

<div class="chip">
    <img src="../images/free-time-learn-icon.png" alt="Contact Person">
    F T L
</div>
Output :
Tags

Are you create a tag chip just add a close icon inside with the close class.

<div class="chip">
    HTML5
    <i class="close material-icons">close</i>
</div>
<div class="chip blue white-text">
    CSS3
    <i class="close material-icons">close</i>
</div>
<div class="chip red white-text">
    Material Design
    <i class="close material-icons">close</i>
</div>
Output :
Javascript Plugin Usage

Are you add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.

<div class="chips"></div>
<br />
<p>Set initial tags.</p>
<div class="chips chips-initial"></div>
<br />
<p>Placeholders and override hint texts.</p>
<div class="chips chips-placeholder"></div>
<br />
<p>Autocomplete with chips</p>
<div class="chips chips-autocomplete"></div>


<!-- Start jQuery Initialization -->
<script type="text/javascript">
(function($){
  $(function(){
	// Chips
	$('.chips').material_chip();
	
	$('.chips-initial').material_chip({
	  readOnly: true,
	  data: [{
		tag: 'HTML5',
	  }, {
		tag: 'CSS3',
	  }, {
		tag: 'Bootstrap 4',
	  }, {
		tag: 'Material Design',
	  }]
	});
	
	$('.chips-placeholder').material_chip({
	  placeholder: 'Enter a tag',
	  secondaryPlaceholder: '+Tag',
	});
	
	$('.chips-autocomplete').material_chip({
	  autocompleteOptions: {
		data: {
		  'HTML5': null,
		  'CSS3': null,
		  'Bootstrap 4': null,
		  'Material Design': null
		}
	  },
	});

  }); 
})(jQuery);
</script>
<!-- End jQuery Initialization -->
Output :

Chip data object

var chip = {
   tag: 'chip content',
   image: '', //optional
   id: 1, //optional
};
Events

Material chips exposes a few events for hooking into chips functionality.

Event Description
chip.add Chip is added
chip.delete Chip is deleted
chip.select Chip is selected 
$('.chips').on('chip.add', function(e, chip){
  // you have the added chip here
});

$('.chips').on('chip.delete', function(e, chip){
  // you have the deleted chip here
});

$('.chips').on('chip.select', function(e, chip){
  // you have the selected chip here
});
Methods

Use these methods to access the chip data.

Parameter Description
data It returns the stored data. 
$('.chips-initial').material_chip('data');
  Prev Page
Next Page