在Ionic中更改标签位置

Question

我对Ionic很新，我想把我的标签放在包含图像的滑块下方，是否可能？

我已经阅读了文档，帖子论坛，但没有真正回答我的问题：/

Answer 1

您需要添加标签组件和页面（或根据示例进行集成）

首先，使用命令行创建一个新的标签页;

$ ionic generate page MyNewPage

然后在您的组件（.ts）页面中添加以下内容......

import { Component } from '@angular/core';
import { ionicBootstrap } from 'ionic-angular';
import { Tab1 } from './slider-page';
import { Tab2 } from './other-page';
@Component({
  template: `
    <ion-tabs>
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
    </ion-tabs>`
})
class MyApp {

  tab1: any;
  tab2: any;

  constructor() {
    this.tab1 = Tab1;
    this.tab2 = Tab2;
  }
}

您需要确保导入要在标签上显示的页面，然后根据您拥有的页面更改行...

import { Tab1 } from './slider-page';
import { Tab2 } from './other-page';

此外，您还需要更改＆＃39; modules.ts＆＃39;要导入选项卡组件的文件，您应该全部设置。

更多信息可以在官方离子3文档页面上找到; https://ionicframework.com/docs/components/#tabs

Answer 2

所以答案很简单：ion-tabs.tabs.tabs {margin-top:33vh;}结合IonicModule.forRoot(MyApp,{tabsPlacement: 'top'})！