Как добавить strped tabs на Ionic css

Я новичок в ионной структуре, и я начинаю играть, и мне нравится, поэтому я решил сделать новое приложение.Как добавить strped tabs на Ionic css

У меня возникла проблема с добавлением полосатых вкладок сверху. полосатые вкладки не позиционируются сверху. прилагается изображение:

enter image description here

вот мой код тела :):

<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

источник

2015-05-21 Yasser B.

Jsfiddle был бы хорош. – Andrew

Я сделал codepen –

Если вы не хотят нав-бар и хотите, чтобы ваши закладки появляться в самом верху зрения просто добавить этот стиль:

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

Посмотрите на codepen here.

UPDATE:

Я предполагаю, что проблема заключается в том, как вы определили ваши вкладки.

В вашем index.html (главная страница) вы бы что-то вроде этого:

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

и тогда будет иметь другую страницу (вид), где вы Вкладки определены:

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

наверху есть <ion-view> (ссылка here). Внутри <ion-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>

название будет отображаться в верхней части. Внутри каждого <ion-tab> вы должны добавить (here) и ваше содержание <ion-content> (ссылка here).

Посмотрите на это plunker, чтобы узнать, работает ли оно для вас.

источник

2015-05-21 14:24:34 LeftyX

Это потрясающе! и как передавать скрытый контент, я не хочу, чтобы мой контент скрывался за полосатым баром. это возможно ? –

Я обновил свой ответ. веселит. – LeftyX

по вкладкам по умолчанию находятся в нижней части КСН и сверху на андроида. Вы можете настроить эти значения по умолчанию с $ ionicConfigProvider:

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

Этот код будет идти в app.js в проекте стартера:

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

источник

2015-05-21 14:05:16 aquint

Не могли бы вы объяснить, где это добавить, вы можете использовать мой код –

Я обновил свой ответ, чтобы отразить это. – aquint

@aquint это не работает, предметы за вкладками – carton

Вы можете попробовать сделать что-то с заголовком-бар, я сделал Лил CodePen, чтобы помочь вам :)

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

CodePen Header-bar tabs

источник

2015-05-21 14:08:15 carton

Вот как я решил эту проблему для моего проекта. Я использовал структуру ионных вкладов с ионным видом иона.

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

источник

2015-11-09 23:18:33

Как добавить strped tabs на Ionic css

ответ

Смежные вопросы