Swipeable tabs do not have class page-content

[scriptPilot]

Swipeable tabs need class page-content for proper display, but neither it's not done automatically nor is there any option. Workaround: <f7-tab class="page-content" ... works well.

<template>
  <f7-page no-page-content with-subnavbar>
    <f7-navbar title="Tabs" back-link="Back" sliding>
      <f7-subnavbar>
        <f7-buttons>
          <f7-button tab-link="#tab1" active>Tab 1</f7-button>
          <f7-button tab-link="#tab2">Tab 2</f7-button>
          <f7-button tab-link="#tab3">Tab 3</f7-button>
        </f7-buttons>
      </f7-subnavbar>
    </f7-navbar>
    <f7-tabs swipeable>
      <f7-tab id="tab1" active>
      ...

[jascolley]

If you take a look at the kitchen sink it shows the way it should be implemented is by using the f7-page-content component instead of the f7-tab component and pass in the id of your tab and the boolean 'tab' as true. We even used this example when building it in our 'Reactified' version in our kitchen sink and it works like a charm.

So the Vue code would look something like this for your tabs -

<f7-tabs swipeable>
  <f7-page-content id="tab1" tab active>
    <f7-block>
      <p>Tab 1</p>
      <p>Sample Text</p>            
    </f7-block>
  </f7-page-content>
  <f7-page-content id="tab2" tab>
    <f7-block>
      <p>Tab 2</p>
      <p>Sample Text 2</p>            
    </f7-block>
  </f7-page-content>

Hope this helps and is what you meant!

[scriptPilot]

Thank you, @jascolley - maybe some hint on the tab docs page could be helpful.