Используйте пользовательские значки с вкладками в ionic2

Мне нужно использовать таможенные значки с вкладками в ionic 2.

Кроме того, мне нужно изменить цвет заголовка и значок, если вкладка выбрана.

Пример:

ионные вкладки


ionic-framework ionicons ionic2
person Enric Gimenez    schedule 15.02.2017    source источник
comment
я думаю, что мы не можем это сделать, посмотрите на github.com/driftyco/ionic/issues /7732   -  person Fernando Del Olmo    schedule 15.02.2017
comment
Пожалуйста, проверьте мой ответ, я надеюсь, что это поможет вам :) ionic-3/50391770#50391770" title="как добавить пользовательское изображение в значок кнопки вкладки в ionic 3"> stackoverflow.com/questions/47152672/   -  person Saad Abbasi    schedule 17.05.2018

Ответы (3)


arrow_upward
11
arrow_downward

Это самый простой способ, который я нашел на форумах по адресу https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/ 36.

В файле app.scss добавьте следующий код:

ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="custom-icon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="custom-icon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

Затем в своих шаблонах вы можете использовать следующий HTML-код для создания значка:

<ion-icon class="custom-icon1"></ion-icon>

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

person adjwilli    schedule 15.06.2017
comment
Это не работало в Android. фон: текущий цвет; покрыть все - person IntoTheDeep; 10.01.2018

arrow_upward
7
arrow_downward

Пример 3 таможенных иконок

scss-файл

.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
        .tab-button-icon {
            background-repeat:no-repeat;
            background-position:center;
            height:24px;
            width:24px;
            background-size:contain;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            &:before {
                display:none;
            }
        }
    }

    .tabs-ios {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }
     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-md {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-wp {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

HTML-файл

  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>

Источник и более подробная информация: https://forum.ionicframework.com/t/ionic2-tutorial-tabs-with-custom-active-inactive-icons/75163

person DanielGatti    schedule 10.11.2017
comment
Это работает, когда я работаю с ionic cordova run android -lc, но значок не отображается в производственной сборке. Любое решение? - person Ankur; 21.01.2019

arrow_upward
-2
arrow_downward

Ознакомьтесь с компонентом tabs ionic 2 здесь.

См. здесь информацию об использовании пользовательских значков и их отображении на вкладках. .

Кроме того, я думаю, вы можете изменить свойства CSS вашего заголовка и значка с помощью класса .animate.

Если нет, то Проверить элемент в окне браузера и найти класс, который изменяется при выборе вкладки. Вы можете запустить свой проект в браузере с помощью ionic serve.

person Sagar Kulkarni    schedule 15.02.2017