How to add strped tabs to Ionic css
I am new to ionic structure and I am starting to play and I like it, so I decided to create a new application.
I am having a problem adding striped tabs at the top. striped tabs are not positioned on top. see attached image:
here is my body code :):
<body ng-app="starter">
<div class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
<div class="tabs">
<a class="tab-item" href="#">
hier
</a>
<a class="tab-item active" href="#">
aujourd'hui
</a>
<a class="tab-item" href="#">
demain
</a>
</div>
</div>
<ion-content>
<div ng-controller="customersCtrl">
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#" align="center" >
First Item
</a>
<a class="item" href="#" align="center" >
Second Item
</a>
<a class="item" href="#" align="center" >
Third Item
</a>
<a class="item" href="#" align="center" >
Fifth Item
</a>
</div>
</div>
</ion-content>
</body>
source to share
If you don't want a navbar and want your tabs to appear at the very top of the view, just add this style:
.tabs-top >.tabs, .tabs.tabs-top
{
top: 0 !important;
}
Take a look at the codepen here .
UPDATE:
I think the problem is in how you have defined your tabs.
In your index.html (main page) you have something like this:
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
and then you will have another page (view) that lists your tabs:
<ion-view view-title="home" hide-nav-bar="true" hide-back-button="true">
<ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
<ion-tab title="hier">
<ion-nav-view name="tab-1">
<ion-content padding="true" has-header="false">
<h1>HOME</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="aujourd'hui">
<ion-nav-view name="tab-2">
<ion-content padding="true" has-header="false">
<h1>SETTINGS</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="demain" >
<ion-nav-view name="tab-3">
<ion-content padding="true" has-header="false">
<h1>INFO</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
at the top you are <ion-view>
(link here ). Inside <ion-tabs>
you will have your own tabs:
<ion-tab title="hier">
<ion-nav-view name="tab-1">
<ion-content padding="true" has-header="false">
<h1>HOME</h1>
</ion-content>
</ion-nav-view>
</ion-tab>
the title appears at the top. Inside each <ion-tab>
you must add (link here ) and your content <ion-content>
(link here ).
Take a look at this plunker to see if it works for you.
source to share
By default, tabs are at the bottom on ios and on top on Android. You can customize these defaults with the $ ionicConfigProvider:
.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top");
})
This code will appear in app.js in the starter project:
angular.module('ionicApp', ['ionic'])
.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top");
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
console.log('HomeTabCtrl');
});
source to share
This is how I solved this problem for my project. I used the structure of the ionic contributions of the ion ion vision.
<ion-view view-title="View Name">
<ion-content>
<ion-tabs>
<ion-tab title="Tab 1">
<h4>Tab 1</h4>
More content here...
</ion-tab>
<ion-tab title="Tab 2">
<h4>Tab 2</h4>
More content here...
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
source to share