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>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>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 -->Chip data object
var chip = {
tag: 'chip content',
image: '', //optional
id: 1, //optional
};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
});Use these methods to access the chip data.
| Parameter | Description |
|---|---|
| data | It returns the stored data. |
$('.chips-initial').material_chip('data');