CODEWITHSUNDEEP
javascripthtmlcssangularjsionic-framework
Yasser B.
Yasser B.

Reputation: 835

How to add strped tabs on Ionic css

I'm new to ionic framework, and I start to play with and I like, so I decided to make a new application.

I'm facing a problem with adding a striped tabs on the top. the striped tabs are not positined in the top. see attached image :

enter image description here

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>

Codepen CODE + DEMO

Upvotes: 4

Views: 5450

Answers (4)

Todd Hale
Todd Hale

Reputation: 571

This is how I solved this issue for my project. I used the ion-view > ion-content > ion-tabs structure.

<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>

Upvotes: 0

LeftyX
LeftyX

Reputation: 35587

If you don't want the nav-bar and want your tabs to appear at the very top of the view simply add this style:

.tabs-top >.tabs, .tabs.tabs-top
{
    top: 0 !important;
}

Have a look at the codepen here.

UPDATE:

I guess the problem is in the way you have defined your tabs.

In your index.html (main page) you would have something like this:

<body ng-app="app">
   <ion-nav-view></ion-nav-view>
</body>

and then you would have another page (view) where you have your tabs defined:

<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 have <ion-view> (ref. here). Inside the <ion-tabs> you would have your 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 will appear at the top. Inside each <ion-tab> you must add a (ref. here) and your content <ion-content> (ref. here).

Have a look at this plunker to see if it works for you.

Upvotes: 3

aquint
aquint

Reputation: 512

By default tabs are at the bottom on ios and top on android. You can configure these defaults with the $ionicConfigProvider:

.config(function($ionicConfigProvider){
    $ionicConfigProvider.tabs.position("top");
})

This code would go 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');
});

Upvotes: 0

carton
carton

Reputation: 1168

You can try to do something with header-bar , i made a litle CodePen to help you :)

  <ion-header-bar> your tabs </ion-header-bar>

CodePen Header-bar tabs

Upvotes: 0

Related Questions