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

Question

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

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

Пример:

ionic Tabs

Answer 1

Отъезд tabs компонент ионной 2 here.

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

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

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

Answer 2

Это самый простой способ, который я нашел, начиная с форумов 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 name="custom-icon1"></ion-icon> 

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

Answer 3

3 таможенный иконки например

файл СКС

.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