How to have 2 f7-panel that are in different components, framework7 and vuejs?

1

I have 2 views with its components. in both views I use what the panel-left is, working in these ways.

component 1:

> <f7-navbar class="bg-color-cyan-9">
>            <f7-nav-left>
>             <f7-link class="panel-open" open-panel="left" icon="fas fa-bars"></f7-link>
>            </f7-nav-left> 
>            <f7-nav-right>
>            <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-ios="f7:search" icon-aurora="f7:search" icon-md="material:search"></f7-link>
>            </f7-nav-right>
>            <f7-searchbar
>             class="searchbar-demo"
>             expandable
>             search-container=".search-list"
>             search-in=".item-title"
>             placeholder="Realiza tu busqueda"
>             :disable-button="!$theme.aurora"
>            ></f7-searchbar>
>            <f7-panel left cover>
>             <PanelLeft></PanelLeft> <!--Esto ya lo tengo montado mediante components: {}-->
>            </f7-panel>
>         </f7-navbar>

Component 2:

> <f7-navbar>
>                 <f7-nav-left>
>                  <f7-link class="panel-open" open-panel="left" icon="fas fa-bars"></f7-link>
>                 </f7-nav-left>
>                   <div class="title"></div>
>                 <f7-nav-right>
>                 <f7-link
>                   class="searchbar-enable"
>                   data-searchbar=".searchbar-components"
>                   icon="fas fa-search"
>                  ></f7-link>
>                 </f7-nav-right>
>                 <f7-searchbar
>                 class="searchbar-components"
>                 search-container=".components-list"
>                 search-in="a"
>                 placeholder="Busqueda"
>                 expandable
>                 ></f7-searchbar>
>                <f7-panel left cover>
>                <PanelLeft2></PanelLeft2> <!--Esto ya lo tengo montado mediante components: {}-->
>                </f7-panel>
>             </f7-navbar>

Both views are loaded, working with f7-toolbar in the following way:

> <f7-toolbar tabbar labels class="toolbar-bottom-md bg-color-cyan-9">
>  <f7-link tab-link route-tab-id="tab-1" v-if="pagina_principal == '1'" href="/">
>     <f7-icon icon="fas fa-home" size="20px"></f7-icon>
>     <span class="tabbar-label">Home</span>
>  </f7-link>
>  <f7-link tab-link route-tab-id="tab-1-2" v-else href="/licitacionesgeneral">
>      <f7-icon icon="fas fa-home" size="20px"></f7-icon>
>      <span class="tabbar-label">Home</span>
>  </f7-link>
> </f7-toolbar>
> <f7-tabs routable>
>   <f7-tab id="tab-1"></f7-tab>
>   <f7-tab id="tab-1-2"></f7-tab>
> </f7-tabs>

Visually it is this way:

w6P5D.png455×653 23.1 KB

When pressing ‘Show Server’, send me another view, which is the second view it contains in </ f7-panel>

Skip the following error: [ Vue warn]: Error in mounted hook: "Error: Framework7: Can not create panel; app already has a left panel!"

Indicating that the application already has a left panel and I must have different panel-left, for each component.

Beforehand thank you very much.

2

Hi, from your code i assume that you speak spanish.

F7 solo puede tener un panel izquierdo y uno derecho. Por eso el mensaje de error.

Lo que podrias hacer es 1 solo panel, asi no rompe F7. Y cambiar el contendido del panel con
component is

    <f7-panel left reveal theme-dark>
      <f7-view id="left-panel-view">
        <component :is='panelToUse'></component>
      </f7-view>
    </f7-panel>
...
  data() {
    return {
    	panelToUse: 'my-panel-1'
    }
  }
...
// y desde cualquer lado de la app:
methods: {
    togglePanel () {
    	if (this.$root.panelToUse === 'my-panel-1') this.$root.panelToUse = 'my-panel-2'
        else if (this.$root.panelToUse === 'my-panel-2') this.$root.panelToUse = 'my-panel-1'
    }
  }

te dejo un jsfiddle con el ejemplo que arme.
jsfiddle

2 Likes
3

Muchas gracias por tu tiempo, estimado.