# vue-expand-panel

> Expand panel for Vue

Latest version **1.0.5** (published 2018-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-expand-panel
pnpm add vue-expand-panel
yarn add vue-expand-panel
bun add vue-expand-panel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-08-10 |
| First published | 2018-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Tim |
| Maintainers | timrchen95 |
| Keywords | vue-expand-panel, vue expand panel, vue expand, vue panel |

## Links

- npm: https://www.npmjs.com/package/vue-expand-panel
- Repository: https://github.com/TimRChen/vue-expand-panel
- Homepage: https://github.com/TimRChen/vue-expand-panel#readme
- Issues: https://github.com/TimRChen/vue-expand-panel/issues
- npm.io page: https://npm.io/package/vue-expand-panel

## Recent versions

- 1.0.5 (latest) — 2018-08-10
- 1.0.4 — 2018-08-10
- 1.0.3 — 2018-08-10
- 1.0.2 — 2018-08-10
- 1.0.1 — 2018-08-09
- 1.0.0 — 2018-08-09
- 0.0.4 — 2018-08-09
- 0.0.3 — 2018-08-09
- 0.0.2 — 2018-08-09
- 0.0.1 — 2018-08-09

## README

[![GitHub stars](https://img.shields.io/github/stars/TimRChen/vue-expand-panel.svg?style=flat-square)](https://github.com/TimRChen/vue-expand-panel/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/TimRChen/vue-expand-panel.svg?style=flat-square)](https://github.com/TimRChen/vue-expand-panel/issues)
[![GitHub forks](https://img.shields.io/github/forks/TimRChen/vue-expand-panel.svg?style=flat-square)](https://github.com/TimRChen/vue-expand-panel/network)
[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/TimRChen/vue-expand-panel)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/TimRChen/vue-expand-panel)

![NPM](https://nodei.co/npm/vue-expand-panel.png?downloads=true&downloadRank=true&stars=true)


# Vue-expand-panel
Expand panel component for Vue.

# Example
[查看在线DEMO](https://timrchen.github.io/demo-item-display/vue-expand-panel/index.html)

# Install

#### NPM

``` bash
npm install vue-expand-panel --save
```

### Mount

#### mount with global

``` javascript
import Vue from 'vue'
import VueExpandPanel from 'vue-expand-panel'

// import styles
import 'vue-expand-panel/dist/vue-expand-panel.css'

// mount with global
Vue.use(VueExpandPanel)
```

#### mount with component

```javascript
import { expandPanel } from 'vue-expand-panel'
// import styles
import 'vue-expand-panel/dist/vue-expand-panel.css'

export default {
  components: {
    expandPanel
  }
}
```


### Component

```vue
<template>
  <div class="vue-expand-panel">
    <ul>
      <li v-for="(item, index) in expandList" :key="index">
        <expand-panel :title="item.title">
          <div class="section-content" v-for="(data, key) in item.dataList" :key="key">
            <div class="col-txt col-1">{{ data.col_1 }}</div>
            <div class="col-txt col-2">{{ data.col_2 }}</div>
            <div class="col-txt col-3">{{ data.col_3 }}</div>
          </div>
        </expand-panel>
      </li>
    </ul>
  </div>
</template>
```


# Options

| prop       | type     |
| :--------  | :----- |
| title      | `String` |


# Author
[TimRChen](https://github.com/TimRChen)

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