I'm using the awesome framework Ionic to build my first application.
I want to be able to navigate between ion views without the need to use a nav bar.
I have page1 and Page2 I can navigate to the page 2 from the page 1 but I can get back to the page 1 from the page 2.
i'm using a simple button to naviate like :
<button class="button button-clear button-positive" ui-sref="tab.chats" >go</button>
here is my full code : PLUNKER CODE + DEMO
You're using your tabs wrong.
Your tabs must be wrapped in a tabs directive.
<ion-tabs class="tabs-item-hide">
<ion-tab title="dash" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<ion-tab title="chats" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
</ion-tabs>
tabs-item-hide cause you want to hide them.
Plunker.
Related
I am building an app using the Ionic framework tabbed view. Ionic already gives me tabs at the bottom but I also want two buttons at the top that changes the view. I cannot seem to get this to work. Specifically the one at the top right (see screenshot). Right now, when you click on it; it does nothing.
This is the tab interface they give me:
<ion-view id="page1">
<ion-tabs class="tabs-stable tabs-icon-bottom" id="tabsController-tabs1">
<ion-tab icon="ion-ios-photos" href="#/page1/index" id="tabsController-tab1">
<ion-nav-view name="tab1"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
In my routes.js I have this state for my new button:
.state('tabsController.myMoments', {
url: '/myMoments',
cache:false,
views: {
'tab4': {
templateUrl: 'myMoments/myMoments.html',
controller: 'MyMomentsController',
controllerAs: 'vm'
}
}
})
I have also, sort of 'hacked' the button. Its not actually a tabbed state, its just a button with a ng-click that sends you to the desired state. I put this code in my index.html:
<ion-nav-buttons side="right">
<div class="ion-person" ng-click="indexController.redirectMyMoments()"></div>
</ion-nav-buttons>
I don't understand where I am supposed to put 'tab4'. My assumption is that it goes with these rest of my tabs but no matter where I put it, it seems to mess up my other tabs and I don't want to make another ion-tab in there because I don't want it to be at the bottom.
I have also noticed that if I change the view name to 'tab3' it actually works so it is changing the state correctly, however, it highlights the third tab when you click on the top right view which is also bad.
Thanks for any help.
EDIT:
Plunker of my problem:
https://plnkr.co/edit/PTS9Jt?p=preview
Your last tab name is suppose to be tab4 instead of tab2 in your tab interface.
<ion-view id="page1">
<ion-tab icon="" href="#/page1/index" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab4">
<ion-nav-view name="tab4"></ion-nav-view>
</ion-tab>
Replace your code with this.
--------------------------UPDATE------------------------
Now, for Tab-3, You cannot have multiple tabs with same name. So what you can do in it is you can create a nested view in it. As in, you can have 2 views in it with different names.. one timer and one camera(OR ANYTHING ELSE YOU WANT). Here is the reference of multiple views in one tab. ionic multiple view states for one tab
Now each of your tab will have a unique name and a unique-associated id for them. So you can style it as you want it to look like.
all. I need a help about the mobile app. So I follow the 'todos list' tutorial of meteor angular 1, and build an simple mobile app with ionic framework. But I need to click the button or tabs twice in order to make it work. How to solve this twice clicking issue?
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-football" ui-sref="tabs.about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-bag" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tab>
</ion-tabs>
So these are basically the code from ionic, but I need to click a button twice like 'About' button to change the state to state 'about'. And I'm using angular 1, anybody have similar problems before?
Please refer to this issue. https://github.com/Urigo/meteor-ionic/issues/30
Removing the mobile-experience package should fix the problem.
From ionic docs:
Out of the box, Ionic automatically removes the 300ms delay in order
to make Ionic apps feel more “native” like. Resultingly, other
solutions such as fastclick and Angular’s ngTouch should not be
included, to avoid conflicts.
Remove mobile-experience and add again the mobile-status-bar and launch-screen.
I am using Ionic framework and want to create tabs without icons. I know I can achieve this with the CSS component tabs (http://ionicframework.com/docs/components/#tabs). Just wanted to check if it's possible with ion-tab directive also (http://ionicframework.com/docs/api/directive/ionTabs/). I tried with ion-tab directive by not providing the icon attribute. It creates the tab, but the placeholder of the icon is still there and the tabs don't look good with that empty space in place of the icon.
Try this.
<ion-content scroll="false">
<ion-tabs class="tabs-striped tabs-top">
<ion-tab title="Home" href="#">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="Gallery" href="#">
<ion-nav-view name="gallery"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
Navigate to Friends tab then click "G.I. Joe".
Back button, transition and history are working as expected.
this sample
But I want it to hide the tabs while entering the details page, so I made the view replace the main nav, like this:
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'#': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
But now Back button, transition and history stop working.
expected to work
Here is just what I want
Looking at your tabs.html:
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">
<!-- Pets Tab -->
<ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
it already states at the top that each ion-nav-view has its own navigation history.
So if you load the details html in another view you'll lose history information. Hence there's no backbutton.
However, look at this proposed solution witch uses a custom directive to achieve what you want.
Here is the expected to work.
How ?
I added the tabs-item-hide class for the <ion-tabs> tag with ng-class.
Then use $rootScope as a flag inside every controller to detect if current view wants to show or not the tabs.
Maybe my solution is not good enough, but I think it will help you.
Cons?
You have to put the $rootScope flag (in my example is : $rootScope.data.hideTabs) in every controller that you want the tabs to show or hide.
Everything inside <ion-content> won't be shown.
But you can modify it anytime for better usage, for example you can create a factory to manage it.
P/S: I have inspired from this post
I have an ionic modal window which serves as setting's menu
plan is to use the modal with a small header and inside the content use the ion-tabs directive in a simple manner that each click shows and hide's a div
I've read the docs saying that they have a bug related to using the tabs inside a ion-content, so im aware of it.
how then can i achieve this funcionallity, if i remove the ion-content than the tabs directive is being pushed down instead of showing on top of the screen, here is the markup for the modal:
<ion-modal-view>
<ion-header-bar style="background-color: #40863E">
<h1 class="title" style="color:white;">My Account</h1>
<div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>
<ion-content>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
</ion-tab>
<ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
<ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>
</ion-content>
</ion-modal-view>
*UPDATE
adding a picture to describe the problem
Try to use ion-pane instead of ion-content.
Remove the <ion-content> tag and then you can use CSS to push the top of the tabs down. ionContent is good about knowing when a header is used, but it does have some issues when ionTabs are inside. Something like the following, but you might need to use a more specific CSS selector.
.tabs { margin-top: 44px; }