dreyn74
February 28, 2018, 6:01pm
1
How do I make tabs that actually show content that I select with one of it’s tabs??
I have tried every combination, read every example, and have gotten nowhere with this.
None of the following will work as a routable tab:
Toolbar.vue:
<f7-toolbar tabbar>
<f7-link tab-link="#tab1" icon="icon-1" href="/tab1" text="tab1" />
<f7-link tab-link="#tab2" icon="icon-2" href="/tab2/" text="tab2" />
<f7-link tab-link="#tab3" icon="icon-3" href="/tab3/" text="tab3" />
</f7-toolbar>
<div class="tabs tabs-routable">
<div class="tab page-content" id="tab1"></div>
<div class="tab page-content" id="tab2"></div>
<div class="tab page-content" id="tab3"></div>
</div>
<!-- Tabs >
<f7-page-content tab id="tab1" tab-active>Tab 1 Content ...</f7-page-content>
<f7-page-content tab id="tab2">Tab 2 Content ...</f7-page-content>
<f7-page-content tab id="tab3">Tab 3 Content ...</f7-page-content>
<!--f7-tabs routable>
<f7-tab tab id="tab1" url="/tab1" tab-active />
<f7-tab tab id="tab2" url="/tab2/" />
<f7-tab tab id="tab3" url="/tab3/" />
</f7-tabs-->
<!-- Tabs>
<f7-views tabs id="tabs">
<f7-view tab id="tab1" url="/tab1/" main tab-active />
<f7-view tab id="tab2" url="/tab2/" />
<f7-view tab id="tab3" url="/tab3/" />
</f7-views -->
My router:
{ component: home, id: 'home', path: '/home/',
tabs: [
{ meta: { name: "tab1" }, tabId: 'tab1', component: all, path: '/tab1' },
{ meta: { name: "tab2" }, tabId: 'tab2', component: online, path: '/tab2/' },
{ meta: { name: "tab3" }, tabId: 'tab3', component: pending, path: '/tab3/' },
{ meta: {}, tabId: '404', component: error, path: '(.*)' }
],
},
App.vue:
<div id="app">
<!-- Statusbar -->
<f7-statusbar />
<!-- From component above -->
<tool-bar />
<!-- Left Panel -->
<f7-panel left cover theme-dark>
<f7-view url="/panel-left/" />
</f7-panel>
<!-- Right Panel -->
<f7-panel right cover theme-dark>
<f7-view url="/panel-right/" />
</f7-panel>
<!-- Main View -->
<f7-view id="main-view" url="/home/" main navbar-through :dynamic-navbar="true" />
dreyn74
February 28, 2018, 6:34pm
4
Thank you for your reply!
I was following this example under the “Tab Link” section where it says:
<f7-tabs>
<f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
<f7-tab id="tab-1">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link="#tab-1" tab-link-active>Show Tab 1</f7-link>
<f7-link tab-link="#tab-2">Show Tab 2</f7-link>
<!-- Renders to: -->
<!-- Tabs -->
<div class="tabs">
<div class="tab tab-active" id="tab-1">Tab 1</div>
<div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" data-tab="#tab-1" class="tab-link tab-link-active">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>
And right below there is a correct routable tabs example:
<!-- Tabs -->
<f7-tabs>
<f7-tab id="tab-1"></f7-tab>
<f7-tab id="tab-2"></f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>
<!-- Renders to: -->
<!-- Tabs -->
<div class="tabs">
<div class="tab" id="tab-1"></div>
<div class="tab" id="tab-2"></div>
</div>
<!-- Switch Between Tabs -->
<a href="/tabs/" class="tab-link" data-route-tab-id="tab-1">Show Tab 1</a>
<a href="/tabs/tab-2/" class="tab-link" data-route-tab-id="tab-2">Show Tab 2</a>
2 Likes
I used the kitchen sink example, and now I get this error. I don’t have these kinds of routing problems with other ui-libraries.
TypeError: Cannot read property '__vue__' of undefined
at Router$1.tabComponentLoader (framework7-vue.esm.bundle.js?8e71:152)
at loadTab (framework7.esm.bundle.js?c501:3560)
at eval (framework7.esm.bundle.js?c501:3568)
at Array.forEach (<anonymous>)
at Router$1.tabLoad (framework7.esm.bundle.js?c501:3568)
at Router$1.forward (framework7.esm.bundle.js?c501:3146)
at resolve (framework7.esm.bundle.js?c501:3293)
at VueComponent.eval (framework7-vue.esm.bundle.js?8e71:121)
at Array.eval (vue.esm.js?efeb:1813)
at flushCallbacks (vue.esm.js?efeb:1734)
App.vue:
<f7-view id="main-view" url="/home/" main navbar-through :dynamic-navbar="true" />
Routes:
export default [
{ component: home, id: 'home', path: '/home/',
tabs: [
{ meta: { name: "tab1" }, id: 'tab1', component: tab1, path: '/' },
{ meta: { name: "tab2" }, id: 'tab2', component: tab2, path: '/tab2/' },
{ meta: { name: "tab3" }, id: 'tab3', component: tab3, path: '/tab3/'},
],
},
Home.vue:
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="./" text="tab1" />
<f7-link tab-link route-tab-id="tab-2" href="tab2/" text="tab2" />
<f7-link tab-link route-tab-id="tab-3" href="tab3/" text="tab3" />
<!-- Tabs -->
<f7-tabs>
<f7-tab id="tab-1" />
<f7-tab id="tab-2" />
<f7-tab id="tab-3" />
</f7-tabs>
Any reason why your home.vue doesn’t have f7-page? Page component must return pages (f7-page)
Thank you for your reply. Here is the rest of the template for Home.vue:
This example demonstrates the three things that I don’t understand about framework7:
The routes are not found, yet they are exactly as in the kitchen-sink example.
The url does not even change??
The “not found” page is not underneath the tab bar.
The back button on the “404” page does not go back(probably related to the 2nd point).
<f7-page tabs tabbar-fixed :page-content="false">
<f7-navbar sliding><!-- sliding v-if="$theme.ios"-->
<f7-nav-left>
<f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left" />
</f7-nav-left>
<f7-nav-title>My App</f7-nav-title>
<f7-nav-right>
<f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right" />
</f7-nav-right>
</f7-navbar>
<!-- From "Kitchen Sink" example -->
<f7-toolbar tabbar>
<f7-link tab-link route-tab-id="tab-1" href="./" text="tab1" />
<f7-link tab-link route-tab-id="tab-2" href="tab1/" text="tab2" />
<f7-link tab-link route-tab-id="tab-3" href="tab2/" text="tab3" />
</f7-toolbar>
<!-- Tabs -->
<f7-tabs>
<f7-tab id="tab-1" />
<f7-tab id="tab-2" />
<f7-tab id="tab-3" />
</f7-tabs>
</f7-page>
Working example https://jsfiddle.net/2f87p02q/
Don’t use self-closing tags on Vue components!!!
3 Likes