Vue-expand-panel
Expand panel component for Vue.
Example
Install
NPM
npm install vue-expand-panel --save
Mount
mount with global
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
import { expandPanel } from 'vue-expand-panel'
// import styles
import 'vue-expand-panel/dist/vue-expand-panel.css'
export default {
components: {
expandPanel
}
}
Component
<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 |