нижний колонтитул ionic3 с ионными вкладками - PullRequest
Новая
       5

нижний колонтитул ionic3 с ионными вкладками

0 голосов
/ 11 мая 2018

Я хочу сделать общий нижний колонтитул для всех страниц, нижний колонтитул имеет 5 кнопок, первая выбрана по умолчанию, а эта или страница, открытая первой кнопкой, имеют три вкладки, я сделал три вкладки и всехорошо, но я не знаю, как добавить нижний колонтитул?я должен добавить это на каждой странице?(будет много повторений) есть идеи?вкладки ионных он появляется не на всех страницах, как я хочу, потому что я добавляю в app.module.ts 

tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
          name="mainTabs"
          tabsPlacement="top"
          tabsLayout="icon-hide"
          tabsHighlight="true"
          [ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
  <ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
  <ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
  <ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>

нижний колонтитул: 

<ion-footer>
  <ion-toolbar>
    <ion-buttons>
      <!--Main-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-home"></ion-icon>
          <label class="title-icon-footer">AAA</label>
        </div>
      </button>
      <!--my Programs-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="ios-play"></ion-icon>
          <label class="title-icon-footer">BBB</label>
        </div>
      </button>
      <!--my webinars-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-desktop"></ion-icon>
          <label class="title-icon-footer">CCC</label>
        </div>
      </button>
      <!--my notification-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-notifications"></ion-icon>
          <label class="title-icon-footer">CCC</label>
        </div>
      </button>
      <!--my account-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-person"></ion-icon>
          <label class="title-icon-footer">DDD</label>
        </div>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

1 Ответ

0 голосов
/ 05 августа 2018

Я хотел сделать то же самое и в итоге не использовал вкладки и создал компонент нижнего колонтитула, который я включил на каждой странице. Я передал navController со страницы в нижний колонтитул, чтобы нижний колонтитул мог перемещаться по страницам.

На каждой странице .html <ion-footer> <my-footer [navController]="navController"></my-footer> </ion-footer>

Компонент нижнего колонтитула .html <ion-grid no-padding> <ion-row align-items-center> <ion-col col-6 text-center> <button ion-button icon-only (click)="gotoPage('HomePage')"> <ion-icon name="md-apps"></ion-icon> <span>Home</span> </button> </ion-col> <ion-col text-center> <button ion-button icon-only (click)="gotoPage('ContactPage')"> <ion-icon name="md-list-box"></ion-icon> <span>Contact</span> </button> </ion-col> </ion-row> </ion-grid>

Компонент нижнего колонтитула .ts import {Component, Input} из '@ angular / core'; import {NavController} из 'ionic-angular'; 

@Component({
    selector: 'mwc-footer',
    templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {

    @Input('navController') navController;

    constructor() { }

    public gotoPage(page: string): void {
        this.navController.setRoot(page);
    }
}
...