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; }
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.
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>
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.
Here is codepen example. When I click on Scientific Facts button, it is directed to the facts page.
In facts page, I have to manually type view-title="facts", so the header can show title "facts".
Is it possible to get the button text(Scientific Facts) automatically to be the view-title?
http://codepen.io/ionic/pen/odqCz
<html ng-app="ionicApp">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
#IonicFramework
</div>
<div class="item">
#DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
I'm not quite sure the motivation behind this request, but one possible way to solve it would be to add the desired title into the URL of the anchor that redirects to your "facts" page, i.e.:
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts?title=Scientific%20Facts">Scientific Facts</a>
If you alter your route to the page to be aware of that query param, you could use the $stateParams service within that page's controller to retrieve that value, i.e.:
.state('tabs.facts', {
url: "/facts?:title",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
Notice the url "/facts?:title" - the ":title" now becomes a parameter that will be picked up by the $stateParam service. Now within your controller you could just do this:
.controller('FactController', function ($scope, $stateParams) {
$scope.title = $stateParams.title;
});
Now you can reference that title right from your Facts view via {{title}}.
Here is an updated pen that shows this working.
http://codepen.io/anon/pen/OVMbVX
Seems like a lot of effort though, just to pass around the title ;-)
A better approach could be to create a "page names" service, which has all your page names in one place, and then grab that services from both controllers; on the home controller you could use the page name to setup the anchor text, and on the other page use it to setup the page title. Lots of ways to skin this cat.
There are two ways to achieve this:
1) The most obvious one is done with prototypal controller inheritance in angular. You need to declare a controller for the tabs state.
Within the $scope in this controller you can define the title for the button and the header as scope variable, e.x:
$scope.testTitle = 'Scientific Facts';
Now since every other controller inherits from the tabs controller, the testTitle property is also in the inherited scope and can be used to render the title.
Updated codepen: http://codepen.io/anon/pen/mJVOJJ
I would not recommend to do this this way since is hard to know which properties are defined in which controller and this will get very messy with the time.
2) You can declare a service and define the title property there. Than you can inject the service into controller to get the title property.
In this way you keep the $scope clean:
.factory('TitleService', function() {
var titles = {
t1:'foobar',
t3:'baz',
t4:'bar'
};
return titles;
});
Codepen: http://codepen.io/anon/pen/xGZRZM
I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.
I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.
My set up is this...
tabs: tab.feed, tab.friends, tab.account
other view: randompage
Here is my route set up...
.state('randompage', {
url:'/randompage',
templateUrl: 'templates/randompage.html',
controller: 'RandomPageCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
Here is the tabs.html
<ion-tabs class="tabs-icon-top tabs-top">
<!-- Feed Tab -->
<ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
<!-- The rest are just from the tab skeleton -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-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>
Here is the tab-feed.html
<ion-view title="Feed">
<ion-nav-buttons side="right">
<a class="button button-icon ion-android-camera" href="#/randompage"></a>
</ion-nav-buttons>
<ion-content class="padding">
<h1>Feed</h1>
</ion-content>
</ion-view>
Here is the randompage.html
<ion-view title="Random Page">
<ion-content lass="padding">
</ion-content>
</ion-view>
Everything navigates and shows correctly except the back button is not showing.
Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.
Thanks!
This has been a long time problem for me as well. While the history stack is broken in this use case, 'backView' in the history object is correct. The full history object can be seen with this log line:
console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );
My solution is to manually add in a Back button on global pages.
Global page html:
<ion-view view-title="Help">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>
Javascript:
$scope.goBack = function() {
$ionicHistory.goBack();
};
Another alternative is to modify the ionic source. Replace enabledBack() in ionic.bundle.js with this:
enabledBack: function(view) {
//original code
//var backView = getBackView(view);
//return !!(backView && backView.historyId === view.historyId);
//new code to show back
var backView = viewHistory.backView;
return backView != null;
},
I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.
splash view --> tab view --> random page (out of tab)
|
tab1 --> nested view (in tab)
|
tab2 --> nested view (in tab)
root history stack:
splash view ---> random page
tab history stack:
tab view ---> tab1 --> nested view
---> tab2 --> nested view
I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.
<ion-view title="tabs">
<ion-content padding="false">
<ion-pane>
<ion-nav-view name="tab-content"></ion-nav-view>
</ion-pane>
<div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</ion-content>
</ion-view>
then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.
I am sorry I don't have enough reputation to add a comment.
Ryan's answer worked like a charm for me(not the modify ionic source part), I just want to add a point that if one uses
ng-click="$ionicGoBack()"
instead of
ng-click="goBack()"
the Javascript can be omitted.