如何在我的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;
`
答案 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
:
$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