70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<button v-if="isOpen" @click="toggle" class="btn btn btn-outline-primary">
|
||
|
|
<span>{{ closeText }}</span>
|
||
|
|
|
||
|
|
<svg class="nav-icon-container" :class="'icon icon-' + closeIcon">
|
||
|
|
<use :xlink:href="'#icon-' + closeIcon"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button v-else @click="toggle" class="btn btn btn-outline-primary">
|
||
|
|
<span>{{ openText }}</span>
|
||
|
|
|
||
|
|
<svg class="nav-icon-container" :class="'icon icon-' + openIcon">
|
||
|
|
<use :xlink:href="'#icon-' + openIcon"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
openIcon: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
closeIcon: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
openText: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
closeText: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isOpen: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggle() {
|
||
|
|
this.isOpen = !this.isOpen;
|
||
|
|
this.$emit("toggle", this.isOpen);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* button {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
} */
|
||
|
|
</style>
|