Mate Rio - Material Design Admin Template

Chips usage

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Jane Doe

Tag 1

Tag 2


	<!-- Contact sample -->
	<div class="chip">
		<img src="imgs/operator-female-smile_sml01.jpg" alt="Operator">
		Jane Doe
	</div>
	
	<!-- Tag samples -->
	<div class="chip">
		Tag 1
		<i class="close material-icons">close</i>
	</div>
	<div class="chip pink accent-1 white-text">
		Tag 2
		<i class="close material-icons">close</i>
	</div>

Javascript Plugin usage

To 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.

Set initial tags.

Use placeholders and override hint texts.

Use autocomplete with chips.

Markup


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

jQuery Initialization


  $('.chips').material_chip();
  $('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });
  $('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });
  $('.chips-autocomplete').material_chip({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });

Chip data object


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

jQuery Plugin Options

Option Name	Type	Description
data	array	Set the chip data (look at the Chip data object)
placeholder	string	Set first placeholder when there are no tags.
secondaryPlaceholder	string	Set second placeholder when adding additional tags.
autocompleteData	Object	Set autocomplete data.
autocompleteLimit	Integer	Set autocomplete limit.

Events

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

Event	Description
chip.add	this method is triggered when a chip is added.
chip.delete	this method is triggered when a chip is deleted.
chip.select	this method is triggered when a 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');

For more detailed informations please visit: http://materializecss.com/chips.html