Javascript 如何在Ionic css上添加strped选项卡_Javascript_Html_Css_Angularjs_Ionic Framework

Javascript 如何在Ionic css上添加strped选项卡

javascript html css angularjs ionic-framework

Javascript 如何在Ionic css上添加strped选项卡,javascript,html,css,angularjs,ionic-framework,Javascript,Html,Css,Angularjs,Ionic Framework,我不熟悉ionic框架，我开始玩它，我喜欢它，所以我决定开发一个新的应用程序在顶部添加带条纹的选项卡时，我遇到了一个问题。带条纹的卡舌不位于顶部。见附图：这是我的身体代码：）：糖果棒默认情况下，ios上的标签位于底部，android上的标签位于顶部。您可以使用$ionicConfigProvider配置这些默认值： .config(function($ionicConfigProvider){ $ionicConfigProvider.tabs.position("top"

我不熟悉ionic框架，我开始玩它，我喜欢它，所以我决定开发一个新的应用程序

在顶部添加带条纹的选项卡时，我遇到了一个问题。带条纹的卡舌不位于顶部。见附图：

这是我的身体代码：）：


糖果棒

默认情况下，ios上的标签位于底部，android上的标签位于顶部。您可以使用$ionicConfigProvider配置这些默认值：

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

此代码将出现在starter项目的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');
});

你可以试着用标题栏做些什么，我做了一个小代码笔来帮助你：）

您的选项卡

如果您不希望导航栏显示在视图的最顶端，只需添加以下样式：

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

看看密码笔

更新：

我想问题在于您定义选项卡的方式

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


表1
更多内容在这里。。。
表2
更多内容在这里。。。

jsfiddle就好了。你能解释一下在哪里添加这个吗，你可以使用我的代码吗？太棒了！以及如何避免隐藏内容，我不希望我的内容被隐藏在条纹条后面。可能吗？

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