when I am writing ionic tabs [ion-tabs] then I use the class "tabs-positive tabs-icon-top"
nut when I run run it and inspect the element from Chrome I see there are some extra class the like :"tabs-top tabs-striped"
Here is my code
<ion-tabs class="tabs-positive tabs-icon-top">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Man Tab -->
<ion-tab title="Man" icon-off="ion-man" icon-on="ion-man" href="#/tab/man">
<ion-nav-view name="tab-man"></ion-nav-view>
</ion-tab>
<!-- Woman Tab -->
<ion-tab title="Woman" icon-off="ion-woman" icon-on="ion-woman" href="#/tab/woman">
<ion-nav-view name="tab-woman"></ion-nav-view>
</ion-tab>
</ion-tabs>
And here is what I get in chrome
<ion-tabs class="tabs-positive tabs-icon-top pane tabs-top tabs-striped" nav-view="active" style="transform: translate3d(0%, 0px, 0px);"><div class="tab-nav tabs">
Is there any way to avoid these unexpected Css class insertion.
Related
In Ionic's official website, tabs just use for root element.
But I want to put some components with <ion-tabs> in the same level, such as:
<my-component></my-component>
<ion-tabs>
<ion-tab ...></ion-tab>
<ion-tab ...></ion-tab>
<ion-tab ...></ion-tab>
</ion-tabs>
Because each tab has its own stack, I don't want to use other component instead of it.
How I can do this?
i have created new app with tabs. i want a header bar below tabs. how to get it?
even if i get a div which displays content below tabs its fine.
the hide div is in the child page of tab i wanted to keep in a different page and add it below tabs so that it appears in all the pages
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Live View" icon-off="ion-ios-speedometer" icon-on="ion-ios-speedometer" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Statistics" icon-off="ion-stats-bars" icon-on="ion-stats-bars" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tab title="Service" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-chatbox-working" icon-on="ion-chatbox-working" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
</ion-tabs>
<!--<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>-->
<!--<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>-->
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>
<h2>Welcome to Ionic</h2>
<p>
This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the Ionic Market.
</p>
<p>
To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
</p>
<p>
If you need help with your app, join the Ionic Community on the Ionic Forum. Make sure to follow us on Twitter to get important updates and announcements for Ionic developers.
</p>
<p>
For help sending push notifications, join the Ionic Platform and check out Ionic Push. We also have other services available.
</p>
</ion-content>
</ion-view>
i figured it out the solution.
just add a peace of code in index file
</ion-nav-bar>
<ion-nav-bar class="has-tabs">
<div class="bar-stable bar-subheader no-tap-scroll" id="divslide"></div>
</ion-nav-bar>
thais it... it works..
I am facing an issue in ionic framework. Am working together Side menu bar and Tabs. When am clicking on the side menu bar to view the page. that time am facing Blinking and flickering issue in
Here is my side menu am added in index.html file.
<!DOCTYPE html>
<html ng-app="testing">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width" />
<title>tile</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- <link href="css/animation.css" rel="stylesheet"> -->
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/controllers.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class=" nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-thin-left">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content has-header="true" has-bouncing="true">
<ion-list class="sidemenu-bar">
<ion-item href="#/test" menu-close>test</ion-item>
<ion-item href="#/test1" menu-close>test1</ion-item>
<ion-item href="#/test2" menu-close>test2</ion-item>
<ion-item href="#/test3" menu-close>test3</ion-item>
<ion-item href="#/test4" menu-close>test4</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
For the tabs am using my code as below.
<ion-view title="HOME" animation="slide-left-right">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top">
<ion-tab title="tab1" icon="ion-card" href="#/tab/home" class="primartyellow">
<ion-nav-view name="home-tab" animation="slide-left-right"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon="ion-trophy" href="#/tab/tab2" class="primartyellow">
<ion-nav-view name="tab2-tab" animation="slide-left-right"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon="ion-ios-location" href="#/tab/tab3" class="primartyellow" >
<ion-nav-view name="tab3-tab" animation="slide-left-right"></ion-nav-view>
</ion-tab>
<ion-tab title="tab4" icon="ion-ios-heart" href="#/tab/tab4" class="primartyellow" >
<ion-nav-view name="tab4-tab" animation="slide-left-right"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
white flickering when click on side menu options. I have used ion bottom tabs with side menu.
I just started using Ionic with Angular for a project. So this might be a beginners mistake.
So I made an html file with a header, tabs and a list inside a tab. Now I do get the problem that the first item of the list disappears after the header.
I'm trying to achieve this with the following code:
<ion-header-bar class="bar-default">
<h1 class="title">Test</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped">
<ion-tab title="Rooms">
<ion-content class="scroll-content ionic-scroll has-header">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Another tab"></ion-tab>
<ion-tab title="Another tab"></ion-tab>
</ion-tabs>
This does give me a header, a list and tabs. But like I said, the first item disappears after the header.
I noticed if I put the <ion-content><ion-list>..</ion-list></ion-content> outside of the tabs content, it does actually work like it should. But according to the documentation you can place the content inside of the ion-tab tag.
ion-tabs contains a set of ion-tab but ion-tab directive requires you to include a ion-nav-view inside each tab.
You won't find this in the documentation.
Your html would look like this:
<body ng-app="app">
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped tabs-top">
<ion-tab title="Rooms">
<ion-nav-view>
<ion-content ng-controller="mainCtrl">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>AAA</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>BBB</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
I've used the class tabs-top for the ion-tabs directive but you can change it the way you prefer.
Notice that I've placed a <ion-nav-view> inside each <ion-tab>.
That's the place where your content will be loaded by the framework.
It's tricky but it becomes obvious when you start playing with routes and each tab content is loaded from other views.
If you want to see how it works you can check this.
i'm trying to make work navigation with tabs.
here is a jsfiddle with the issue:
http://jsfiddle.net/brayancastrop/fgcruwxg/1/
I have a tabbed view that loads without back button or transition.
<script type="text/ng-template" id="templates/conference.html">
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
Right now when i go to an event the back button appears correctly in the nav bar, but when i go to a conference, the back button does not appear neither the transition animation.
Maybe i'm using wrong the tabs or missing something on the abstract state but i've tried using hide-back-button in the ion-view for each tab and tried to debug if history has something to do without luck :/
Please, any guidance will be apreciated.
Looks like you have your <ion-nav-view name="conferenceInformation"></ion-nav-view> nested inside your ion-tabs, which won't work. I think it needs to be above the ion-tabs directive.
Change this:
<script type="text/ng-template" id="templates/conference.html">
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
to this:
<script type="text/ng-template" id="templates/conference.html">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
Updated jsfiddle