paper-chip

WebJar for paper-chip

License	MIT
Categories	Github Development Tools Version Controls
GroupId	org.webjars.npm
ArtifactId	github-com-bastiion-paper-chip-
Last Version	2.0.21
Release Date	Nov 14, 2019
Type	jar
Description	paper-chip WebJar for paper-chip
Project URL	http://webjars.org
Source Code Management	https://github.com/bastiion/paper-chip

Download github-com-bastiion-paper-chip-

Filename	Size
github-com-bastiion-paper-chip--2.0.21.pom
github-com-bastiion-paper-chip--2.0.21.jar	78 KB
github-com-bastiion-paper-chip--2.0.21-sources.jar	22 bytes
github-com-bastiion-paper-chip--2.0.21-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-bastiion-paper-chip-/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-bastiion-paper-chip-</artifactId>
    <version>2.0.21</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-bastiion-paper-chip-/
implementation 'org.webjars.npm:github-com-bastiion-paper-chip-:2.0.21'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-bastiion-paper-chip-/
implementation ("org.webjars.npm:github-com-bastiion-paper-chip-:2.0.21")

Apache Buildr

'org.webjars.npm:github-com-bastiion-paper-chip-:jar:2.0.21'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-bastiion-paper-chip-" rev="2.0.21">
  <artifact name="github-com-bastiion-paper-chip-" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-bastiion-paper-chip-', version='2.0.21')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-bastiion-paper-chip-" % "2.0.21"

Leiningen

[org.webjars.npm/github-com-bastiion-paper-chip- "2.0.21"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

<paper-chip>

DEMO

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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request 🤓

Versions

Version
2.0.21 Nov 14, 2019