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

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.

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');
});

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