# @shapla/vue-chip

> Chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.

Latest version **1.0.1** (published 2021-06-23) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @shapla/vue-chip
pnpm add @shapla/vue-chip
yarn add @shapla/vue-chip
bun add @shapla/vue-chip
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-06-23 |
| First published | 2021-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sayful Islam |
| Maintainers | sayful |
| Keywords | vue, vue-component, chip |

## Links

- npm: https://www.npmjs.com/package/@shapla/vue-chip
- Repository: https://github.com/sayful1/shapla-vue-components
- Homepage: https://github.com/sayful1/shapla-vue-components#readme
- Issues: https://github.com/sayful1/shapla-vue-components/issues
- npm.io page: https://npm.io/package/@shapla/vue-chip

## Dependencies (2)

- [shapla-css](https://npm.io/package/shapla-css.md) ^2.0
- [@shapla/vue-cross](https://npm.io/package/@shapla/vue-cross.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2021-06-23
- 1.0.0 — 2021-06-01

## README

# Shapla Chip
Chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-chip
```

# Usage

### Styles

with SCSS:

```js
import '@shapla/vue-chip/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-chip/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaChip from '@shapla/vue-chip';

export default {
  name: 'Hello',

  components: {
    ShaplaChip
  }
}

```

```html
<shapla-chip text="Sayful Islam" :deletable="true" @delete="handleDeleteEvent"/>
```

### Props
| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|----------------------------------------
| `text`        | String    | **no**    | ``        | Chip text
| `image_src`   | String    | **no**    | ``        | Chip contact image url
| `deletable`   | Boolean   | **no**    | `false`   | If set `true`, Delete icon will appear
| `small`       | Boolean   | **no**    | `false`   | If set `true`, a small chip with display
| `height`      | String    | **no**    | `32px`    | Custom height of chip

## Listeners
The chip component fires the following events:

**`delete`**: When delete icon is clicked, it fires the event.

```html
<!-- template -->
<shapla-chip @delete="handleDeleteEvent"></shapla-chip>


<!-- method -->
methods: {
    handleDeleteEvent(){
    // Handle delete event
    }
}
```

---
_Source: https://npm.io/package/@shapla/vue-chip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._