Question

Ionic4项目中我们可以使用Ionic4底部Tabs组件组件ion-tabs对项目进行布局。

ion-tabs官方文档地址:https://ionicframework.com/docs/api/tabs

Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components.

ion-tabs is a styleless component that works as a router outlet in order to handle navigation. This component does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs:

  Home Content
  Settings Content

  

    
      Home
      
      6
    

    
      Settings
      
    

  
</ion-tabs>

Note that both ion-tabs and ion-tab-bar can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that feels like a native app.

ion-tab-bar always needs slot="bottom" in order to be projected into ion-tabs at the right place.

The "tab" property

Each ion-tab-button will activate one of the tabs when tapped. In order to link the button to the ion-tab container, a matching tab property must be used.

[...]
<ion-tab-button tab="settings">

This ion-tab-button and ion-tab are now linked by the common tab property.

The tab property identifies each tab, and it has to be unique within the scope of the same ion-tabs. It's important to set the same property to ion-tab and ion-tab-button, even if you are only using one. e.g. You could use the ion-tab-bar without using ion-tabs. In this case you should still give each ion-tab the property of tab="something".

Router integration

When the ionic's router (ion-router) is used, the tab property matches the "component" of ion-route:

The following route within the scope of a ion-tabs outlet:

</ion-route>

Would match the following tab:

</ion-tab>

Angular Router integration

Using tabs with Angular's router is fairly straight forward. Here you only need to define tab which is the reference to the route.

  
    
      
      Schedule
    
  
</ion-tabs>

ion-tabs　用法(Usage)

angularjavascriptreactvue

  
    
      
      Schedule
      6
    

    
      
      Speakers
    

    
      
      Map
    

    
      
      About
    
  
</ion-tabs>

  
    
  

  
    
  

  
    
  

  
    
  

  
    
      
      Schedule
      6
    

    
      
      Speakers
    

    
      
      Map
    

    
      
      About
    
  

</ion-tabs>

import React from 'react';

import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';

const Example: React.SFC = () => (

  
    
      
        
        Schedule
        6
      

      
        
        Speakers
      

      
        
        Map
      

      
        
        About
      
    
  
);

export default Example;

ion-tabs　事件(Events)

Name	Description
ionTabsDidChange	Emitted when the navigation has finished transitioning to a new component.
ionTabsWillChange	Emitted when the navigation is about to transition to a new component.

ion-tabs　内置方法(Methods)

getSelected
Description	Get the currently selected tab.
Signature	getSelected() => Promise<string | undefined>
getTab
Description	Get a specific tab by the value of its tab property or an element reference.
Signature	getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
select
Description	Select a tab by the value of its tab property or an element reference.
Signature	select(tab: string | HTMLIonTabElement) => Promise<boolean>

Slots

Name	Description
	Content is placed between the named slots if provided without a slot.
"bottom"	Content is placed at the bottom of the screen.
"top"	Content is placed at the top of the screen.