Question

我正在开发离子应用

这是我的代码

<ion-tabs class="tabs-icon-top tabs-background-{......} tabs-color-active-positive" ng-controller="TabCtrl">

  <!-- Home Tab -->
  <ion-tab title="Menu"
           icon-on="ion-ios-book"
           ui-sref="tab.menu">
    <ion-nav-view name="tab-menu"></ion-nav-view>
  </ion-tab>

使用tabs-background-balanced结果

填充黑色时

我需要更改标签背景颜色作为＆＃34;英国蛋糕公司的颜色＆＃34;

我尝试使用

<ion-tabs class="tabs-icon-top tabs-background-{red} tabs-color-active-positive" ng-controller="TabCtrl">

如果你不清楚问题，请发表评论感谢

Answer 1

您可以为制表符和条形Ionic标签定义自己的CSS类。例如，以下是使用tab-custom和bar-custom CSS样式的代码段：

＆＃13;

angular.module('ionicApp', ['ionic'])

.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.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope) {
  console.log('HomeTabCtrl');
});

＆＃13;

.bar.bar-custom {
    border-color: #5D3A23;
    background-color: #5D3A23;
    background-image: linear-gradient(0deg, #0c60ee, #0c60ee 50%, transparent 50%);
    color: #fff; }
    .bar.bar-custom .title {
      color: #fff; }
    .bar.bar-custom.bar-footer {
      background-image: linear-gradient(180deg, #0c60ee, #0c60ee 50%, transparent 50%); }

.bar-custom .button {
  border-color: transparent;
  background-color: #5D3A23;
  color: #fff; }
  .bar-custom .button:hover {
    color: #fff;
    text-decoration: none; }
  .bar-custom .button.active, .bar-positive .button.activated {
    background-color: #0c60ee; }
  .bar-custom .button.button-clear {
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 17px; }
  .bar-custom .button.button-icon {
    border-color: transparent;
    background: none; }


.tabs-custom > .tabs,
.tabs.tabs-custom {
  border-color: #5D3A23;
  background-color: #5D3A23;
  background-image: linear-gradient(0deg, #0c60ee, #0c60ee 50%, transparent 50%);
  color: #fff; }
  .tabs-custom > .tabs .tab-item .badge,
  .tabs.tabs-custom .tab-item .badge {
    background-color: #fff;
    color: #387ef5; }

.tabs-striped.tabs-custom .tabs {
  background-color: #5D3A23; }

.tabs-striped.tabs-custom .tab-item {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1; }
  .tabs-striped.tabs-custom .tab-item .badge {
    opacity: 0.4; }
  .tabs-striped.tabs-custom .tab-item.tab-item-active, .tabs-striped.tabs-custom .tab-item.active, .tabs-striped.tabs-positive .tab-item.activated {
    margin-top: -2px;
    color: #fff;
    border-style: solid;
    border-width: 2px 0 0 0;
    border-color: #fff; }

＆＃13;

<html ng-app="ionicApp">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

      <title>Tabs Example</title>

      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    </head>

    <body>

      <ion-nav-bar class="bar-custom">
        <ion-nav-back-button>
        </ion-nav-back-button>
      </ion-nav-bar>

      <ion-nav-view></ion-nav-view>


      <script id="templates/tabs.html" type="text/ng-template">
        <ion-tabs class="tabs-icon-top tabs-custom">

          <ion-tab title="Home" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
          </ion-tab>

          <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
            <ion-nav-view name="about-tab"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
            <ion-nav-view name="contact-tab"></ion-nav-view>
          </ion-tab>

        </ion-tabs>
      </script>

      <script id="templates/home.html" type="text/ng-template">
        <ion-view view-title="Home">
          <ion-content class="padding">
            <p>
              <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
            </p>
          </ion-content>
        </ion-view>
      </script>

      <script id="templates/about.html" type="text/ng-template">
        <ion-view view-title="About">
          <ion-content class="padding">
            <h3>Create hybrid mobile apps with the web technologies you love.</h3>
            <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
            <p>Built with Sass and optimized for AngularJS.</p>
          </ion-content>
        </ion-view>
      </script>


      <script id="templates/contact.html" type="text/ng-template">
        <ion-view title="Contact">
          <ion-content>
            <div class="list">
              <div class="item">
                @IonicFramework
              </div>
              <div class="item">
                @DriftyTeam
              </div>
            </div>
          </ion-content>
        </ion-view>
      </script>

    </body>

    </html>

＆＃13;

Answer 2

在您的SCSS中：

$positive: #387ef5 !default; /* (Define your desired color in SCSS) */

以下是Ionic开箱即用的选项：

<ion-tabs class="tabs-icon-top tabs-background-stable tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-positive tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-calm tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-balanced tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-energized tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-assertive tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-royal tabs-color-light"></ion-tabs>
<ion-tabs class="tabs-icon-top tabs-background-dark tabs-color-light"></ion-tabs>

<!-- You can change active tab color this way -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive"></ion-tabs>

Answer 3

对我有用的唯一方法是将此代码放在app.scss中：

.tabs-md .tab-button {
  color: white !important;
 }

 //selected color
 .tabs-md .tab-button[aria-selected=true] {
   color: #fce515 !important;
 }

.tab-button {
    color: white !important;
    background-color: #000000;
}

Answer 4

<ion-tab color="primary"
           icon-on="ion-ios-book"
           ui-sref="tab.menu">
    <ion-nav-view name="tab-menu"></ion-nav-view>
  </ion-tab>

然后覆盖主题/ variebles.scss

中的主要颜色变量

如何在离子中使用自定义颜色的标签背景？

4 个答案: