CODEWITHSUNDEEP
javascriptvue.jsfrontendhtml-framework-7
Bibi Ruiz
Bibi Ruiz

Reputation: 19

How create foot into panel with Framework7 + Vue

I am using a website where I want to use the Framework7 combination with Vue.

He created a side panel with a listing inside.

Now I would like to create an icon within this panel but it is positioned at the end of it: an exit icon. Can someone give me a hand?

Inside my myLeftPanel.vue file I have:

<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>Enlace 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>

enter image description here

Upvotes: 0

Views: 137

Answers (1)

pvtallulah
pvtallulah

Reputation: 11

you can create a view inside panel and add the toolbar

 <f7-panel left>
  <f7-view>
    <f7-page>
      <f7-toolbar position="bottom">
        <f7-link>Left Link</f7-link>
        <f7-link>Right Link</f7-link>
      </f7-toolbar>
      <Your content here />
    </f7-page>
  </f7-view>
</f7-panel>

Upvotes: 1

Related Questions