[SOLVED] Changing navbar content when using routable tabs

Questions
1

Hi everyone,

In addition to page content is it possible to use navbar content of every tab when using routable tabs? In my use case every page loaded thru tab will need specific features available in navbar.
I can see page content changes but navbar content is always the same as defined in /tabs-routable/ component.

Any sort of help will be appreciated here.

My code extract:

Routes:

  {
    path: '/tabs-routable/',
    component: TabsRoutable,
    tabs: [
      {
        path: '/',
        id: 'tab1',
        component: Tab1,
      },
      {
        path: '/tab2/',
        id: 'tab2',
        component: Tab2,
      },
      {
        path: '/tab3/',
        id: 'tab3',
        component: Tab3,
      },
    ],
  },

tabs-routable.vue

<template>
  <f7-page :page-content="false" name="tabs-routable">
    <f7-toolbar tabbar>
      <f7-link tab-link href="./" route-tab-id="tab1">Tab1</f7-link>
      <f7-link tab-link href="tab2/" route-tab-id="tab2">Tab2</f7-link>
      <f7-link tab-link href="tab3/" route-tab-id="tab3">Tab3</f7-link>
    </f7-toolbar>
    <f7-tabs tabs-routable>
      <f7-tab class="page-content" id="tab1"></f7-tab>
      <f7-tab class="page-content" id="tab2"></f7-tab>
      <f7-tab class="page-content" id="tab3"></f7-tab>
    </f7-tabs>
  </f7-page>
</template>

tab1

<template>
  <f7-page name="tab1">
    <f7-navbar title="Tab1" back-link="Back"></f7-navbar>
    <f7-list>
      <f7-list-item title="Tab1">
        <f7-block>
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet</p>
          <p>Saepe explicabo volupt.</p>
          <p>Totam reprehenderit am.</p>
        </f7-block>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

tab2

<template>
  <f7-page name="tab2">
    <f7-navbar title="Tab2" back-link="Back"></f7-navbar>
    <f7-list>
      <f7-list-item title="Tab2">
        <f7-block>
          <p>Tab 2 content</p>
          <p>Lorem ipsum dolor sit amet, </p>
          <p>Saepe explicabo vol</p>
          <p>Totam reprehenderit amet co</p>
        </f7-block>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

tab3

<template>
  <f7-page name="tab3">
    <f7-navbar title="Tab3" back-link="Back"></f7-navbar>
    <f7-list>
      <f7-list-item title="Tab3">
        <f7-block>
          <p>Tab 3 content</p>
          <p>Lorem ipsum </p>
          <p>Saepe explicabo voluptas </p>
          <p>Totam reprehenderit amet commodi i</p>
        </f7-block>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

Always show the same content

tab2
tab2.PNG376×661 19.9 KB

2

Hi, i just copy the layout of f7 tab template and it works fine;

jsfiddle

Can you make an example with the error?

3

It is not supported, Page cannot be a routable Tab content

4

Hi Guys, thanks for prompt help!

I managed replacing <f7-page> tag for simple <div> tag on topmost tag of tab components (tab1, tab2, tab3).

Works fine now!
Thank you very much.

1 Like