0.2.1 • Published 4 years ago
@anypoint-web-components/anypoint-chip v0.2.1
anypoint-chip
A compact material design element that represent and input, attribute, or action.
Example
<style>
.avatar {
background-color: red;
color: #fff !important;
width: 24px;
height: 24px;
}
</style>
<h2>Basics</h2>
<section>
<anypoint-chip>Simple chip</anypoint-chip>
<anypoint-chip>
<span class="avatar" slot="icon">C</span>
<span>Chip with icon</span>
</anypoint-chip>
<anypoint-chip removable>
<span class="avatar" slot="icon">R</span>
Chip that can be removed
</anypoint-chip>
<anypoint-chip removable disabled>
<span class="avatar" slot="icon">D</span>
Disabled chip
</anypoint-chip>
</section>
<h2>Input chips</h2>
<section>
<anypoint-chip removable>
<iron-icon icon="communication:location-on" slot="icon"></iron-icon>
Portland
</anypoint-chip>
<anypoint-chip removable>
<iron-icon icon="maps:directions-bike" slot="icon"></iron-icon>
Biking
</anypoint-chip>
</section>Usage
Installation
npm install --save @anypoint-web-components/anypoint-chipIn an html file
<html>
<head>
<script type="module">
import './node_modules/@anypoint-web-components/anypoint-chip/anypoint-chip.js';
</script>
</head>
<body>
<anypoint-chip></anypoint-chip>
</body>
</html>In a LitElement
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-chip/anypoint-chip.js';
class SampleElement extends PolymerElement {
render() {
return html`
<anypoint-chip></anypoint-chip>
`;
}
}
customElements.define('sample-element', SampleElement);Development
git clone https://github.com/anypoint-web-components/anypoint-chip
cd anypoint-chip
npm installRunning the demo locally
npm startRunning the tests
npm testStyling
<anypoint-chip> provides the following custom properties for styling:
| Custom property | Description | Default |
|---|---|---|
--anypoint-chip-background-color | Chip background color | rgba(35, 47, 52, 0.12) |
--anypoint-chip-focused-background-color | Background color when focused | #D6D6D6 |
--anypoint-chip-active-background-color | Background color when toggle is active | #cdcdcd |
--anypoint-chip-icon-color | Color of the icon | #666666 |
--anypoint-chip-label-color | Color of the label | #232F34 |
--anypoint-chip-label-focused-color | Color of the when focused | |
--anypoint-chip-label-active-color | Color of the when active | |
--anypoint-chip-icon-close-color | Color of the close icon | #dfdfdf |
--anypoint-chip-icon-close-background-color | Background color of the close icon | #666666 |
<anypoint-chip> provides the following parts:
| Part name | Description |
|---|---|
anypoint-chip-container | Styles applied to the chip container |
anypoint-chip-icon | Styles applied to the icon container |
anypoint-chip-label | Styles applied to the label container |
anypoint-chip-remove | Styles applied to the delete icon |