Closed scriptPilot closed 7 years ago
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!
Thank you, @jascolley - maybe some hint on the tab docs page could be helpful.
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.