46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
|
|
<slot name="before-button"></slot>
|
|
<slot name="button" :toggle="toggle" :active="active">
|
|
<component :is="buttonTag" :class="buttonClass" @click="toggle()">
|
|
<span class="icon">
|
|
<i v-if="!active" :class="buttonIconOpen"></i>
|
|
<i v-if="active" :class="buttonIconClose"></i>
|
|
</span>
|
|
{{ label }}
|
|
</component>
|
|
</slot>
|
|
<div :class="contentClass" v-show="active">
|
|
<slot></slot>
|
|
</div>
|
|
</component>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
active: this.open,
|
|
}
|
|
},
|
|
|
|
props: {
|
|
tag: {type: String, default: "div"},
|
|
label: {type: String, default: ""},
|
|
buttonTag: {type: String, default: "button"},
|
|
activeClass: {type: String, default: "is-active"},
|
|
buttonClass: {type: String, default: "button"},
|
|
buttonIconOpen: { type: String, default:"fa fa-angle-down"},
|
|
buttonIconClose: { type: String, default:"fa fa-angle-up"},
|
|
contentClass: String,
|
|
open: {type: Boolean, default: false},
|
|
noButton: {type: Boolean, default: false},
|
|
},
|
|
|
|
methods: {
|
|
toggle() {
|
|
this.active = !this.active
|
|
}
|
|
},
|
|
}
|
|
</script>
|