src/app/tabs/tabs.page.ts
selector | app-tabs |
styleUrls | tabs.page.scss |
templateUrl | tabs.page.html |
constructor()
|
Defined in src/app/tabs/tabs.page.ts:8
|
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
constructor() {}
}
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="home"></ion-icon>
<ion-label>首页</ion-label>
</ion-tab-button>
<ion-tab-button tab="tasks">
<ion-icon name="clipboard"></ion-icon>
<ion-label>任务</ion-label>
</ion-tab-button>
<ion-tab-button tab="services">
<ion-icon name="construct"></ion-icon>
<ion-label>服务</ion-label>
</ion-tab-button>
<ion-tab-button tab="profile">
<ion-icon name="person"></ion-icon>
<ion-label>我的</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
tabs.page.scss