Comment utiliser des couleurs personnalisées pour les onglets de fond ionique?

Je suis en train d'élaborer ionique application

Voici mon code

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

Lors de la remplir de noir à l'aide tabs-background-balanced Résultat

J'ai besoin de changer d'onglet d'arrière-plan de la couleur que la couleur de "L'anglais Cake Company"

J'ai essayer d'utiliser

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

Comment utiliser des couleurs personnalisées pour les onglets de fond ionique?

Si vous désactivez pas question, pls commentaire
Grâce

Vous voulez le fond des onglets marron?
Oui, et la couleur personnalisée est bon comme

InformationsquelleAutor Amila Sampath | 2015-12-23

Vous pouvez définir vos propres classes CSS pour tab et un bar Ionique balises.
Pour exemple, voici un extrait de code à l'aide de tab-custom et bar-custom styles CSS:

JS:

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

CSS:

.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; }

HTML:

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

InformationsquelleAutor beaver

Dans Votre SCSS:

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

Voici les options qui sort de la boîte, dans Ionique:

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

InformationsquelleAutor Syed

La seule façon qui ont travaillé pour moi est de mettre ce code dans l'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;
}

InformationsquelleAutor user3561494

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

Puis écraser la couleur primaire varieble dans votre thème/variebles.scss

InformationsquelleAutor Cengkuru Michael

Vous devez vous connecter pour publier un commentaire.