JarCasting<paper-chip>
Polymer 2.x Chips represent complex entities in small blocks, such as a contact.
Install the Polymer-CLI for Polymer 2
First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.
Viewing Your Application
$ polymer serve
Example: Basic paper-chip's
<paper-chip label="Basic"></paper-chip>
<paper-chip label="Basic with Avatar Text">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
<paper-chip label="Closable" closable></paper-chip>
<paper-chip label="Closable and image" closable>
<img class="chip-image" slot="avatar" src="demo/avatar.png" alt="Contact Person">
</paper-chip>
<paper-chip label="Closable and icon" closable>
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
Example: paper-chip's with custom styles
<paper-chip label="Custom Label Color" class="custom-label-color"></paper-chip>
<paper-chip label="Custom Background Color" class="custom-background"></paper-chip>
<paper-chip label="No hover effect" no-hover></paper-chip>
<paper-chip label="Custom Avatar Background Color" class="custom-avatar-background">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
<style is="custom-style">
paper-chip.custom-label-color {
--paper-chip-label-color: #4db6ac;
}
paper-chip.custom-background {
--paper-chip-background-color: #64b5f6;
}
paper-chip.custom-avatar-background {
--paper-chip-avatar-background-color: #64b5f6;
}
paper-chip.custom-avatar-font-color-and-size {
--paper-chip-avatar-font-color: red;
--paper-chip-font-size: 16px;
}
</style>
Example: Use tags in an input field
<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
<paper-chip-input label="Input is readonly" items='["one", "two"]' readonly></paper-chip-input>
<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closbale" closable slot="input"></paper-chip>
</paper-chip-input>
<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
<paper-chip-input label="paper-chip-input cannot be empty" required auto-validate error-message="needs some text!" closable></paper-chip-input>
<paper-chip-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]" closable></paper-chip-input>
<paper-chip-input style="display: inline-block; width: calc(100% - 75px);" id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-chip-input>
<button onclick="validate()">Validate</button>
Example: Autocomplete field with tags
<paper-chip-input-autocomplete id="paper-chip-input-autocomplete"
label="+Add (Enter) -Delete (Backspace)"
closable></paper-chip-input-autocomplete>
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest |
Latest |
Latest |
Latest |
Latest |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
🤓