如何在ionic3角度项目中垂直显示harizontal标签

时间:2018-04-14 06:13:04

标签: angular ionic3

如何在我的ionic3项目中垂直显示harizontal标签.Below是我的html和打字稿代码。



export class TabsPage {
	tab1Root = PatientPage;
	tab2Root = ExpensesPage;
	tab3Root = EventcalendarPage;
	tab4Root = ContactPage;
	constructor() {
	}
	ionViewDidLoad() {
	}
  	ionViewDidEnter(){
  		/* tabs hide when keyboard open in Android */
    	// this.keyboard.onKeyboardShow().subscribe(()=>{document.body.classList.add('keyboard-is-open')})
    	// this.keyboard.onKeyboardHide().subscribe(()=>{document.body.classList.remove('keyboard-is-open')})
	}
}

<ion-tabs class = "convert">
  <ion-tab [root]="tab1Root" tabTitle="Patients" tabIcon="md-contacts"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Expenses" tabIcon="md-cash"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Appointments" tabIcon="md-clipboard"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Contact" tabIcon="md-contact"></ion-tab>
</ion-tabs>
&#13;
&#13;
&#13;

`

2 个答案:

答案 0 :(得分:1)

不幸的是,tabs组件似乎在垂直布局中效果不佳,至少没有一些scss覆盖和黑客攻击:/

我关注the solution found by Chris Griffith

使用ion-split-pane您可以拆分布局:

<ion-split-pane when="xs">

        <ion-menu [content]="content" class="c-sidenav">

            <ion-content>
                <button ion-button large block clear icon-only (click)="togglePage('Page1')">
                    <ion-icon name="md-list"></ion-icon>
                </button>
                <button ion-button large block clear icon-only  (click)="togglePage('Page2')">
                    <ion-icon name="md-pin"></ion-icon>
                </button>
            </ion-content>

        </ion-menu>

        <ion-nav [root]="rootPage" main #content></ion-nav>

    </ion-split-pane>

使用variables.scss

中的scss变量调整宽度
$split-pane-ios-side-min-width: 70px;
$split-pane-ios-side-max-width: 70px;
$split-pane-md-side-min-width: 70px;
$split-pane-md-side-max-width: 70px;
$split-pane-wp-side-min-width: 70px;
$split-pane-wp-side-max-width: 70px;

管理app.components.ts中的路线,例如:

import { Component, ViewChild } from '@angular/core';
import { App, Config, Nav, Platform } from 'ionic-angular';

import { Settings } from '../providers/providers';

import { MainPage } from '../pages/pages';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage = MainPage;
  isPage1: boolean = true;
  isPage2: boolean = false;

  constructor(platform: Platform,
              settings: Settings,
              private config: Config,
              private app: App) {
    ...
  }

  ...

  togglePage(whichPage: string): void {
    this.isPage1 = false;
    this.isPage2 = false;

    let newTab: string = '';

    switch (whichPage) {
      case 'Page1':
        this.isPage1 = true;
        newTab = 'Page1Page';
        break;
      case 'Page2':
        this.isPage2 = true;
        newTab = 'Page2Page';
        break;
    }

    this.nav.setRoot(newTab);
  }

}

答案 1 :(得分:0)

要显示垂直标签,您只需使用list.collect{ case Right(x) => x } 组件和始终保持res0: List[Int] = List(42) 的{​​{1}}即可。

或者,这是一种方法:vertical tabs in ionic