Chips
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
close
Tag 2
close
<!-- 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.
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
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
Parameter | Description |
---|---|
data | It returns the stored data. |
$('.chips-initial').material_chip('data');
For more detailed informations please visit: http://materializecss.com/chips.html