I am currently working on a website and looking to incorporate the Framework7 with Vue.
The task at hand involves creating a side panel with a list inside it.
One specific requirement is to add an exit icon at the end of this panel. Any assistance in achieving this would be greatly appreciated!
Within my myLeftPanel.vue file, the code snippet looks like:
<template>
<f7-panel left cover theme-auto :visible-breakpoint="960">
<f7-list media-list>
<f7-list-item link="#">
<img slot="media" src="https://image.flaticon.com/icons/svg/2943/2943218.svg" width="80" />
<a href>Link 1</a>
</f7-list-item>
<f7-list-item
link="#"
>
<img
slot="media"
src="https://banner2.cleanpng.com/20180410/zje/kisspng-borderlands-2-borderlands-3-tales-from-the-borderl-alphabet-collection-5acd7b9d83f218.3032657615234159655405.jpg"
width="80"
/>
</f7-list-item>
<f7-list-item
link="#"
>
<img
slot="media"
src="https://cdn.icon-icons.com/icons2/1070/PNG/512/darth-vader_icon-icons.com_76959.png"
width="80"
/>
</f7-list-item>
</f7-list>
</f7-panel>
</template>
<script>
import myLeftPanel from '../components/myLeftPanel'
export default {
components:{
'myLeftPanel': myLeftPanel
},
mounted() {
this.$f7ready((f7) => {
});
}
}
</script>