Question

image similar

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

如何更改ionic 3中中心图标的大小和颜色？

Answer 1

您可以在<ion-tab>中添加类，例如

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

并在.scss文件中为自己的类编写一些scss，例如

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

Answer 2

您可以尝试类似的代码

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

更改选项卡大小的最佳方法（以及离子文档中正确的方法）是使用它们在documentation上提供的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。

如何更改ionic 3标签的大小和颜色？

3 个答案: