ion-tab-button

概要(CONTENTS)

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

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

A tab button is a UI component that is placed inside of a tab bar. The tab button can specify the layout of the icon and label and connect to a tab view.

See the tabs documentation for more details on configuring tabs.

ion-tab-button 用法(Usage)

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar">ion-icon>
      <ion-label>Scheduleion-label>
    ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="contacts">ion-icon>
      <ion-label>Speakersion-label>
    ion-tab-button>

    <ion-tab-button tab="map">
      <ion-icon name="map">ion-icon>
      <ion-label>Mapion-label>
    ion-tab-button>

    <ion-tab-button tab="about">
      <ion-icon name="information-circle">ion-icon>
      <ion-label>Aboution-label>
    ion-tab-button>
  ion-tab-bar>

ion-tabs>
<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
      <ion-icon name="calendar">ion-icon>
      <ion-label>Scheduleion-label>
    ion-tab-button>

    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
      <ion-icon name="contacts">ion-icon>
      <ion-label>Speakersion-label>
    ion-tab-button>

    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
      <ion-icon name="map">ion-icon>
      <ion-label>Mapion-label>
    ion-tab-button>

    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
      <ion-icon name="information-circle">ion-icon>
      <ion-label>Aboution-label>
    ion-tab-button>
  ion-tab-bar>

  <ion-tab tab="schedule">
    <ion-router-outlet name="schedule">ion-router-outlet>
  ion-tab>

  <ion-tab tab="speakers">
    <ion-router-outlet name="speakers">ion-router-outlet>
  ion-tab>

  <ion-tab tab="map">
    <ion-router-outlet name="map">ion-router-outlet>
  ion-tab>

  <ion-tab tab="about">
    <ion-router-outlet name="about">ion-router-outlet>
  ion-tab>

ion-tabs>
import React from 'react';

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

const Example: React.SFC<{}> = () => (

  <IonTabs>

    <IonTabBar slot="bottom">
      <IonTabButton tab="schedule">
        <IonIcon name="calendar" />
        <IonLabel>ScheduleIonLabel>
      IonTabButton>

      <IonTabButton tab="speakers">
        <IonIcon name="contacts" />
        <IonLabel>SpeakersIonLabel>
      IonTabButton>

      <IonTabButton tab="map">
        <IonIcon name="map" />
        <IonLabel>MapIonLabel>
      IonTabButton>

      <IonTabButton tab="about">
        <IonIcon name="information-circle" />
        <IonLabel>AboutIonLabel>
      IonTabButton>
    IonTabBar>

  IonTabs>
);

export default Example;
<template>
  <ion-tabs>

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar">ion-icon>
        <ion-label>Scheduleion-label>
      ion-tab-button>

      <ion-tab-button tab="speakers">
        <ion-icon name="contacts">ion-icon>
        <ion-label>Speakersion-label>
      ion-tab-button>

      <ion-tab-button tab="map">
        <ion-icon name="map">ion-icon>
        <ion-label>Mapion-label>
      ion-tab-button>

      <ion-tab-button tab="about">
        <ion-icon name="information-circle">ion-icon>
        <ion-label>Aboution-label>
      ion-tab-button>
    ion-tab-bar>

  ion-tabs>
template>

ion-tab-button 属性(Properties)

disabled

Description

The selected tab component

Attribute disabled
Type boolean
Default false

href

Description

The URL which will be used as the href within this tab's button anchor.

Attribute href
Type string | undefined

layout

Description

Set the layout of the text and icon in the tab bar. It defaults to 'icon-top'.

Attribute layout
Type "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

selected

Description

The selected tab component

Attribute selected
Type boolean
Default false

tab

Description

A tab id must be provided for each ion-tab. It's used internally to reference the selected tab or by the router to switch between them.

Attribute tab
Type string | undefined

ion-tab-button中的CSS 自定义属性

Name Description
--background Background of the tab button
--background-focused Background of the focused tab button
--color Color of the tab button
--color-selected Color of the selected tab button
--padding-bottom Bottom padding of the tab button
--padding-end End padding of the tab button
--padding-start Start padding of the tab button
--padding-top Top padding of the tab button
--ripple-color Color of the button ripple effect