Изменение цвета заголовка иона в ионном

Я использую шаблон ионного стартера. Я хотел бы изменить цвет фона заголовка каждой страницы. В настоящее время у меня есть:

<ion-view view-title="Search">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Я пробовал:

<ion-view view-title="Search" class="bar bar-header bar-assertive">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Но он вообще не работает (контент не отображается). Документация заголовка не помогает мне. Каков правильный способ сделать это?

ОТВЕТЫ

Ответ 1

Некоторые способы сделать это:

  • Вы можете добавить ион-навигационную панель для каждого вида.

    <ion-view view-title="Page 1">
  <ion-nav-bar class="bar-balanced">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
    ...
  </ion-content>
</ion-view>

    Пример Codepen

  • Вы также можете обновить фоновый цвет (и любые другие свойства) с помощью ng-style

    Главный навигатор:

     <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

    CSS:

    .nav-bar-block, .bar {
  background-color: inherit !important;
}

    Контроллер:

    $scope.$on('$ionicView.beforeEnter', function() {
    $rootScope.viewColor = 'green';
});

    Пример Codepen

Ответ 2

Не удалось найти для этого чистое решение, но одним взломом может быть использование события $stateChangeStart и установка имени класса вручную.

angular.module('starter')
.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-header-bar'));
            switch(next.name) {
                case 'tab.chats':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-calm');
                    break;
                case 'tab.dash':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-positive');
                    break;
                default :
                    element.removeClass('bar-calm');
                    element.removeClass('bar-positive');
                    element.addClass('bar-balanced');
            }
        }
    });
});

fiddle

ИЗМЕНИТЬ Идея такая же для шаблона боковой панели,

Обновлена ​​скрипка

Обратите внимание на строку

<ion-nav-bar class="bar-positive">

в шаблоне menu.html, он обозначает класс цвета заголовка заголовка. но последующие изменения на страницах i.e указывает, что цвет заголовка должен быть изменен вручную в событии $stateChangeStart,

код:

.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            console.log(element);
            switch(next.name) {
                case 'app.search':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-dark');
                    element.addClass('bar-assertive');
                    break;
                case 'app.browse':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-assertive');
                    element.removeClass('bar-dark');
                    element.addClass('bar-energized');
                    break;
                default :
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-assertive');
                    element.addClass('bar-dark');
            }
        }
    });
});
  • здесь имя состояния проверяется, чтобы увидеть, какая страница активируется ex. app.search
  • тогда согласно требованию определенному классу цветов присваивается удаление других классов цветов.

параметры ионного цвета

надеюсь, что это поможет.

Ответ 3

если вы используете разные состояния, и в каждом состоянии есть другой контроллер, чем просто переменная $scope, такая как $scope.stateone = "true" и т.д. Затем на вашем ионном навигаторе используйте ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-класс принимает классы и выражение, какое бы выражение не было истинным, это класс, который назначен. вы можете использовать ng-класс с любым логическим выражением. так вы можете иметь разные цвета на каждой странице.

Ответ 4

Я изменил решение @shakib в соответствии с моими потребностями, в моем случае пользователь задает тему, щелкнув логотип приложения, и поэтому цвет панели должен измениться. Если это ваш случай, вам не нужно делать switch case, потому что вы хотите изменить все виды

$rootScope.$on("$stateChangeStart", function (event, toState) {
          var element;
          if (toState.name){
              element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
              if (debugMode) console.log(element);
              // I get the bar-class from my localStorage where I keep the user settings
              var saved_bar_class = $localStorage.get('bar-class','bar-calm');

              element.removeClass('bar-pink');
              element.removeClass('bar-calm');
              element.addClass(saved_bar_class);
          //    Here We could use a Switch Case on toState.name to put a different color to each state

          }
      });

Также, когда пользователь нажимает на логотип приложения, я хочу немедленно изменить цвет бара, чтобы дать пользователю отзыв о том, что делает эта кнопка. Вышеприведенный код не будет делать этого, потому что мы еще не изменили состояние, чтобы исправить это, просто добавьте этот код в функцию "изменить тему" ​​

$scope.changeAppTheme = function () {
        var element;
        element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            // some code to select the theme
            element.removeClass('bar-pink');
            element.removeClass('bar-calm');
            element.addClass('bar-pink');
            // some other code
    };

В этом случае у меня есть только два цвета: ионное спокойствие и розовое, которое я определил Надеюсь, что это поможет кому-то.

Ответ 5

Мы получили его в CSS:

.title.title-center.header-item {
    background-color: black;
    margin: 0px;
}

Это означает, что мы просто ссылаемся на классы с заголовками Angular, созданные непосредственно с этим CSS. Надеюсь, это поможет!

Ответ 6

Попробуйте использовать следующий код:

<ion-view>
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Search</h1>
  </ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Ответ 7

Вы можете переопределить $bar-stable-text color (взято из _variables.scss из ionic lib)

Например, при изменении scss

$bar-stable-text: green !default;

Ответ 8

Если вы хотите изменить ion-nav-bar, это работает как шарм:

1. Создайте главный контроллер, чтобы позаботиться о своей индексной странице и обо всех ее представлениях. 2. Добавьте эту функцию в контроллер:

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3. add on-select на вкладку ion-tab, чтобы она вызывала функцию, когда была выбрана ваша вкладка: <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4. добавьте on-deselect к вам ion-tab тоже, если вы хотите, чтобы цвет возвращался к некоторому значению, когда вы уходите.

5. Получайте удовольствие!

Ответ 9

поместите эти строки в свой style.css в директорию /www/css/ вашего ионного проекта

.title.title-center.header-item {
    background-color:#4a87ee;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
}

Ответ 10

//add these lines in your style.css file under /www/css/ yoyr project    directory
 .title.title-center.header-item {
    background-color:#30393A;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
 }

Ответ 11

Если вы используете scss в своем приложении, вы можете создать свой собственный класс баров и использовать в нем ионные пулы.

$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);

.bar {
    &.bar-custom {
        @include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
        &.bar-footer{
            background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
        }

        .button {
            @include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
            @include button-clear(#fff, $bar-title-font-size);
        }
    }
}

После определения вашего класса вы можете использовать свой новый настраиваемый класс bar с директивой ion-nav-bar.

<ion-nav-bar class="bar-custom">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>