<!doctype html> <html> <head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <title>paper-chip Demo</title> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../paper-chip.html"> <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> <link rel="import" href="../../paper-styles/paper-styles.html"> <link rel="import" href="../../paper-toast/paper-toast.html"> <link rel="import" href="../../paper-input/paper-input.html"> <link rel="import" href="../../iron-input/iron-input.html"> <link rel="import" href="avatars.html"> <style is="custom-style" include="demo-pages-shared-styles"> demo-snippet { max-width: 760px; } #chip3 .icon { background-color: var(--default-primary-color); } #tags label { line-height: 40px; } #tags .tags-input { min-height: 32px; padding: 4px 0; z-index: 10; } .tags-input > paper-chip { z-index: 1; margin: 0 4px 0 0; } </style>
</head> <body unresolved>
<h3>Removable chip with <code>iron-icon</code> and a secondary label</h3> <demo-snippet> <template> <paper-chip removable> <iron-icon class="icon" icon="avatars:avatar-1"></iron-icon> <div class="label">John Doe</div> <div class="caption">doeboy@example.com</div> </paper-chip> </template> <paper-toast id="toast1" text="John Doe was removed!"></paper-toast> </demo-snippet> <h3>Same chip, with animated transition</h3> <demo-snippet> <template> <paper-chip removable animated> <iron-icon class="icon" icon="avatars:avatar-1"></iron-icon> <div class="label">John Doe</div> <div class="caption">doeboy@example.com</div> </paper-chip> </template> <paper-toast text="John Doe was removed!"></paper-toast> </demo-snippet> <h3>Animated chip with more content</h3> <demo-snippet> <template> <paper-chip removable animated> <iron-icon class="icon" icon="avatars:avatar-13"></iron-icon> <div class="label">Jane Doe</div> <div class="caption">janedoe@example.com</div> <address> 123 Avenue Way<br> Anytown, USA 12345<br> <br> 555-123-4567 </address> </paper-chip> </template> </demo-snippet> <h3>Chip with single letter instead of an icon</h3> <demo-snippet> <template> <paper-chip> <div class="icon">P</div> <div class="label">Peter Parker</div> <div class="caption">pete@dailybugle.com</div> </paper-chip> </template> </demo-snippet> <h3>Single-line removable chip (does not open)</h3> <demo-snippet> <template> <paper-chip removable single-line> <div class="label">Example Chip</div> </paper-chip> </template> </demo-snippet> <h3>Example chip input field using paper-input-container</h3> <demo-snippet> <template> <template is="dom-bind" id="chipInputDemo"> <paper-input-container id="tags"> <label>Tags</label> <!-- a hidden iron-input holds the bind-value value for paper-input-container --> <input is="iron-input" type="hidden" bind-value="{{tagsString}}"> <div class="tags-input layout horizontal wrap"> <template is="dom-repeat" items="{{tags}}"> <paper-chip removable single-line> <span class="label">{{item}}</span> </paper-chip> </template> <input id="tagInput" type="text" class="flex"> </div> </paper-input-container> </template> </template> </demo-snippet>
</body> <script>
var $ = document.querySelector.bind(document); var $$ = document.querySelectorAll.bind(document); document.addEventListener('WebComponentsReady', function() { var scope = $('#chipInputDemo'); // setup all chips var chips = $$('paper-chip'); function onRemoveChip() { var toast = this.parentNode.querySelector('paper-toast'); if (toast) { toast.show(); } } for (var i=0; i<chips.length; i++) { chips[i].addEventListener('remove', onRemoveChip); chips[i].style.zIndex = chips.length - i; chips[i].setAttribute('tabindex', i + 1); } // setup tags input scope.tags = []; var tagInput = $('#tagInput'); tagInput.addEventListener('input', function(event) { var value = tagInput.value; if (value.slice(-1) === ' ') { scope.push('tags', value); value = ''; } value = value.trim(); scope.tagsString = scope.tags.join(' ') + value; tagInput.value = value; }); tagInput.addEventListener('keydown', function(event) { if (tagInput.value === '' && event.code === 'Backspace') { scope.pop('tags'); scope.tagsString = scope.tags.join(' '); } else if (tagInput.value && event.code === 'Enter') { scope.push('tags', tagInput.value.trim()); tagInput.value = ''; } }); });
</script> </html>