I'm just beginning with Ionic and AngularJS. I'm having trouble creating a mobile app that has both a slidemenu AND the bottom navigation tabs. Is there a demo/template/codepen for doing such a thing?
My code is here (all client-side): http://www.danhendricks.com/apps/soonhired/www/
When I click the top-left menu icon and the menu appears, clicking the links brings me nowhere - it simply closes the menu.
*I tried to put this in codepen or something similar, but since my files are in folders, I couldn't figure out how.
danielh, i was looking for a solution to this problem and I've found your post. It might help to someone else.
http://codepen.io/calendee/pen/oaDhH
<ion-side-menu side="left">
<ion-content>
<ul class="list">
Home
About
Contact
Feature
</ul>
</ion-content>
</ion-side-menu>
Related
I am building an app using Ionic and am utilising the directive <ion-tabs></ion-tabs>
Each tab directive is as standard, eg:
<ion-tab title="Sync" icon-off="ion-android-sync" icon-on="ion-android-sync" href="#/tab/sync"><ion-nav-view name="tab-sync"></ion-nav-view></ion-tab>
When the app is busy syncing I'd like that static "ion-android-sync" to animate.
I see there is <ion-spinner></ion-spinner> to show spinners but I'm not sure of how to show an animated spinner icon inside a tab - anyone know how to do this?
I do not have a definitive solution for you and I am not sure whether this is the best way to do this, but in my opinion the best way to achieve this would be to dissect the <ion-tab> element, which would result in the following:
<a class="tab-item" href="#/tab/sync">
<i class="icon"><ion-spinner></ion-spinner></i>
</a>
Unfortunately, I couldn't find a spinner that looks like the ion-android-sync icon you used. And of course, more code would be necessary to make this switch between icons, but it is a start.
I followed last example of this blog entry and I'm not being able to scroll my app.
To test this example I used just created some divs (with cards on it), those cards are loaded with dynamic data.
My home.html file looks like:
<ion-view>
<ion-tabs>
<ion-tab>
<ion-content>
<div>
<!-- several divs goes here -->
I can't be able to figure why content is not scrolling. I also tried with solution of this post without any luck.
Hope you can help me! Thanks in advance.
Use this line..
<ion-content scroll="true">
if you hide scrolling then use..
<ion-content scroll="false">
I'm using Ionic directives as generated by Ionic Creator. At the top we have a standard nav-bar and tabbed navigation icons at the bottom. Each icon has a specific color and I want the navbar to match the color when clicked.
<ion-nav-bar class="bar-{{$root.color}}">
Firing on-select, I've tried to set $scope.color, $rootScope.color, and even created a function that returns the value of $rootScope.color.
<ion-tab title="Reps" icon="ion-person-stalker balanced" on-select="headerColor('balanced')">
With the code above, the css changes in the inspector but the new color is never applied or rendered. Anyone know a good way to work this in? I've also tried to $scope.$apply() but that just throws errors as other $digests are running.
Here's the app link
https://irthos.github.io/medviz-admin/#/labs
Here's the index.html with the code
https://github.com/irthos/medviz-admin/blob/master/www/index.html
Thanks!
This can be achieved by changing the color when switching states. I created a codepen that does just that:
http://codepen.io/cavanflynn/pen/VLBgEK
<ion-nav-bar class="bar-positive"
ng-class="{'bar-custom': secColor == '1',
'bar-custom2' : secColor == '2'}">
</ion-nav-bar>
I have the following sample code which provides the sample structure for the Left Nav Menu and the Middle Content section.
Here is the Plunker created for this example.
Plunker URL
When i click on Display Left Nav Menu Icon and select a menu item it updates the content of the view "content" as expected.
How ever as soon as i click on the LEft Nav Menu Icon the content from menu.html appear in the content view . Not sure why it is happening.
Left Nav Icon is in leftnav.html and it's handlers are in leftnav.controller.js why the main controller is getting invoked ??
Could you please let me know.
Thanks.
You have a location in the href of your a tag. Just getting rid of that should give you the correct functionality.
<a href="" class="btn btn-default" id="menu-toggle" ng-click='toggle()'>
I have tried to find a solution to this white background problem but after searching and testing all your answers, nothing works.
<ion-tab title="News" icon-off="ion-android-earth" icon-on="ion-android-earth" href="#/tab/news">
<ion-nav-view name="tab-news"></ion-nav-view>
<ion-view>
<ion-nav-bar class="hackbg">
</ion-nav-bar>
</ion-view>
</ion-tab>
Even with this, I can see the white background for a fraction of a second when I navigate through the tabs which is really annoying if you ask me frowning
I have 4 tabs, 3 of them get dynamic data from an http call, the last tab loads an iframe with a video from YouTube. When I launch the app, and navigate through any of the tabs, I can see the annoying white background. Now, if I click on the 4 tab (the iframe video) the first time, I will also see the white background for a fraction of a second. However, if I navigate to another tab (which that said, I will also see the white background), and I come back to the video tab, I will then NO see the white background anymore. All the other 3 tabs I will always see the white background, independently of the times I visit the tab section.
My individual tabs pages look like the following:
<ion-view hide-nav-bar="true" class="hackbg">
<ion-header-bar class="bar-positive bar-header" align-title="left">
<h1 class="title">Logo...</h1>
<div class="buttons pull-right">
<button ng-click="go1()" class="button button-icon icon ion-ios7-1"></button>
<button ng-click="go2()" class="button button-icon icon ion-ios7-2"></button>
<button ng-click="go3()" class="button button-icon icon ion-ios7-3"></button>
<button class="button button-icon ion-android-more" ng-click="popover.show($event)"></button>
</div>
</ion-header-bar>
...
As you can see, I have also added the hackbg on the ion-view with the hope that would fix the problem but it didn't.
I have try/catch all over the code to try to see if I have an error somewhere in the code and that's why the white background. However, no luck, I don't see any error anywhere.
If I go to the individual pages from the navigation (e.g. look at buttons like go1(), I do not see any white background). The problem are only related to the tabs.
Ah, my splashscreen also shows the white background for a fraction of a second after it loads my splashscreen. I also went and google all possible solutions but none did the trick. I also went through all the possible answers I could find on stackoverflow but nothing did the trick.
My .run contains the following:
$ionicPlatform.ready(function () {
setTimeout(function () {
navigator.splashscreen.hide();
}, 6000
I extended the delay to 6000 hoping it will make the white background disappear. It didn't. Interesting thing is that sometimes you see it longer and sometimes extremely fast. It is not consistent.
Does anyone knows another trick I could try to fix this?
I think this is not possible due to Ionic pages only loads once.