Как изменить размер и цвет вкладки ionic 3?

Question

изображение похоже

<ion-tabs >
  <ion-tab [root]="tab1Root"  tabIcon="logo-buffer"></ion-tab>
  <ion-tab [root]="tab2Root"  tabIcon="ios-folder"></ion-tab>
  <ion-tab [root]="tab3Root"  tabIcon="md-add-circle"  ></ion-tab>
  <ion-tab [root]="tab4Root"  tabIcon="ios-people"></ion-tab>
  <ion-tab [root]="tab5Root"  tabIcon="ios-chatbubbles"></ion-tab>
</ion-tabs>

как изменить размер и цвет значка центра в ионном 3 ??

Answer 1

Вы можете попробовать код, подобный

<ion-tab [color]="yourColor">

В вашем файле TS

let yourColor = "primary"; //you can change to secondary, danger, warning, etc.

Редактировать или добавить свой собственный цвет в src/theme/variables.scss

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  // your custom:     #273648
);

Answer 2

Лучший способ (и правильный способ, предусмотренный ионной документацией) изменить размер вкладок - это использовать переменные sass, которые они предоставляют в документации .

$tabs-md-tab-max-width:240px;
$tabs-md-tab-min-height: 49px;
$tabs-md-tab-font-size: 13px;
$tabs-md-tab-icon-size: 14px;

Где "md "обозначает дизайн материала, если вы измените его на" ios ", то изменится только на ios.

Answer 3

Вы можете добавить класс в <ion-tab> что-то вроде

 <ion-tab [root]="tab3Root" class="my-add-button" tabIcon="md-add-circle"  ></ion-tab>

и написать scss для вашего собственного класса в .scss файле что-то вроде

.my-add-button {
  .....
 }