components_chips.html

---
layout: admin
title: Components - Chips

section: components
module: components_chips

header:
    icon: face
    title: Chips
    description: Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

javascripts:
    - js/pages/components_chips.js
---

				<section id="components_chips">
					<!-- ############ -->
					<!-- Introduction -->
					<!-- ############ -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Introduction</h4>

							<div class="chip">
								<img src="img/yuna.jpg" alt="Contact Person">
								Jane Doe
							</div>
							<div class="chip">
								Tag
								<i class="close material-icons">close</i>
							</div>
						</div>
					</div>


					<!-- ######## -->
					<!-- Contacts -->
					<!-- ######## -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Contacts</h4>

							<p>To create a contact chip just add an img inside.</p>

				            <pre>
				            	<code class="language-markup">
&lt;div class="chip">
	&lt;img src="img/yuna.jpg" alt="Contact Person">
	Jane Doe
&lt;/div>
				            	</code>
				            </pre>
						</div>
					</div>


					<!-- #### -->
					<!-- Tags -->
					<!-- #### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Tags</h4>

							<p>To create a tag chip just add an close icon inside with the class <code class="language-markup">close</code></p>

				            <pre>
				            	<code class="language-markup">
&lt;div class="chip">
	Tag
	&lt;i class="close material-icons">close&lt;/i>
&lt;/div>
				            	</code>
				            </pre>
						</div>
					</div>


					<!-- ####################### -->
					<!-- Javascript Plugin Usage -->
					<!-- ####################### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Javascript Plugin Usage</h4>

							<p class="caption">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.</p>
							<div class="chips"></div>
							<p class="caption">Set initial tags.</p>
							<div class="chips chips-initial"></div>
							<p class="caption">Use placeholders and override hint texts.</p>
							<div class="chips chips-placeholder"></div>
						</div>
					</div>


					<!-- ###### -->
					<!-- Markup -->
					<!-- ###### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Markup</h4>

				            <pre>
				            	<code class="language-markup">
&lt;div class="chips">&lt;/div>
&lt;div class="chips chips-initial">&lt;/div>
&lt;div class="chips chips-placeholder">&lt;/div>
				            	</code>
				            </pre>
						</div>
					</div>


					<!-- ##################### -->
					<!-- jQuery Initialization -->
					<!-- ##################### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">jQuery Initialization</h4>

				            <pre>
				            	<code class="language-javascript">
$('.chips').material_chip();
$('.chips-initial').material_chip({
	data: [{
		tag: 'Apple',
	}, {
		tag: 'Microsoft',
	}, {
		tag: 'Google',
	}],
});
$('.chips-placeholder').material_chip({
	placeholder: 'Enter a tag',
	secondaryPlaceholder: '+Tag',
});
				            	</code>
				            </pre>

							<p>Chip data object</p>

				            <pre>
				            	<code class="language-javascript">
var chip = {
	tag: 'chip content',
	image: '', //optional
	id: 1, //optional
};
				            	</code>
				            </pre>
						</div>
					</div>


					<!-- ##################### -->
					<!-- jQuery Plugin Options -->
					<!-- ##################### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">jQuery Plugin Options</h4>

							<table class="highlight">
								<thead>
									<tr>
										<th>Option Name</th>
										<th>Type</th>
										<th>Description</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>data</td>
										<td>array</td>
										<td>Set the chip data (look at the Chip data object)</td>
									</tr>
									<tr>
										<td>placeholder</td>
										<td>string</td>
										<td>Set first placeholder when there are no tags.</td>
									</tr>
									<tr>
										<td>secondaryPlaceholder</td>
										<td>string</td>
										<td>Set second placeholder when adding additional tags.</td>
									</tr>
									<tr>
									</tbody>
								</table>
						</div>
					</div>


					<!-- ###### -->
					<!-- Events -->
					<!-- ###### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Events</h4>

							<p>Material chips exposes a few events for hooking into chips functionality.</p>

							<table class="highlight">
								<thead>
									<tr>
										<th>Event</th>
										<th>Description</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>chips.add</td>
										<td>this method is triggered when a chip is <strong>added</strong>.</td>
									</tr>
									<tr>
										<td>chips.delete</td>
										<td>this method is triggered when a chip is <strong>deleted</strong>.</td>
									</tr>
									<tr>
										<td>chips.select</td>
										<td>this method is triggered when a chip is <strong>selected</strong>.</td>
									</tr>
								</tbody>
							</table>

				            <pre>
				            	<code class="language-javascript">
$('.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
});
				            	</code>
				            </pre>
						</div>
					</div>


					<!-- ####### -->
					<!-- Methods -->
					<!-- ####### -->
					<div class="row">
						<div class="col s12">
							<h4 class="main-text lighten-1">Methods</h4>

							<p>Use these methods to access the chip data.</p>

							<table class="table highlight">
								<thead>
									<tr>
										<th>Parameter</th>
										<th>Description</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>data</td>
										<td>It returns the stored data.</td>
									</tr>
								</tbody>
							</table>

				            <pre>
				            	<code class="language-javascript">
$('.chips-initial').material_chip('data');
				            	</code>
				            </pre>
						</div>
					</div>
				</section>