hello,
I using main app component, the in this component we have two view tabs. in the first view we have the list component ,when click on the list item, we need to route to detail page. but I do not want to show the tab bar in the detail page. how to implement it ?
Try to add no-toolbar
class to detailed page and it should hide tabbar on page open
app.views.main.router.navigate(’/your-route/’)
more #f7 videos
hi,
I add no-toolbar to the page ,but when navigate, the toolbar hidden, but the view does not navigate to detail page.
this is our main.html which is main app component.
<div class="views tabs">
<div class="toolbar tabbar toolbar-bottom tabbar-labels toolbar-hidden">
...
</div>
<div id="view-home" class="view view-main view-init>
..
</div>
<div id="view-settings" class="view tab tab-active">
<div class="list ">
...
</div>
</div>
this is the detail page
<div class="page no-toolbar">
</div>
and we have the routes
var routes = [
{
name: 'detail',
path: '/detail/',
url: './pages/detail.html',
},
];
in the setting view, we have a list control and click the list item I need to navigate to detail page.
but the navigation seems not work
More over , if I press F5 to refresh the page, then the navigation done. So what’s the issue
Where in code examples you posted something related to the “navigating to details” ? I see only routes and views
the list code
<div class="list ">
<ul>
<li>
<a href="/detail/" class="item-link item-content">
<div class="item-inner">
<div class="item-title">item</div>
</div>
</a>
</li>
</ul>
</div>
also some strange things is in main app component, if I use view tabs. the second view page has no page-current attribute when I switch to the second tab. so that If you navigate to detail from second view, the detail page will be hooked to the first view.