https://github.com/anypoint-web-components/anypoint-chip

⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.
https://github.com/anypoint-web-components/anypoint-chip

deprecated obsolete

Last synced: about 2 months ago
JSON representation

⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.

• Host: GitHub
• URL: https://github.com/anypoint-web-components/anypoint-chip
• Owner: anypoint-web-components
• Created: 2019-09-03T22:26:33.000Z (over 5 years ago)
• Default Branch: stage
• Last Pushed: 2023-01-07T09:20:55.000Z (almost 2 years ago)
• Last Synced: 2024-11-08T18:51:10.903Z (about 2 months ago)
• Topics: deprecated, obsolete
• Language: JavaScript
• Homepage:
• Size: 936 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# Deprecated

This component has been moved to `anypoint-web-components/awc`.

-----

A compact material design element that represent and input, attribute, or action.

## Example

```html

.avatar {

  background-color: red;

  color: #fff !important;

  width: 24px;

  height: 24px;

}

Basics


  Simple chip

  

    C

    Chip with icon

  

  

    R

    Chip that can be removed

  

  

    D

    Disabled chip

  

Input chips


  

    

    Portland

  

  

    

    Biking

  

```

## Usage

### Installation

```sh

npm install --save @anypoint-web-components/anypoint-chip

```

### In an html file

```html

  

    

      import './node_modules/@anypoint-web-components/anypoint-chip/anypoint-chip.js';

    

  

  

    

  

```

### In a LitElement

```js

import { LitElement, html } from 'lit-element';

import '@anypoint-web-components/anypoint-chip/anypoint-chip.js';

class SampleElement extends PolymerElement {

  render() {

    return html`

    

    `;

  }

}

customElements.define('sample-element', SampleElement);

```

## Development

```sh

git clone https://github.com/anypoint-web-components/anypoint-chip

cd anypoint-chip

npm install

```

### Running the demo locally

```sh

npm start

```

### Running the tests

```sh

npm test

```

## Styling

`` 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`

`` provides the following [parts](https://www.w3.org/TR/css-shadow-parts-1/):

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