ion-tab-button
Ionic4项目中我们可以使用Ionic4底部Tabs组件组件ion-tab-button对项目进行布局。 ion-tab-button官方文档地址:https://ionicframework.com/docs/api/tab-buttonA tab button is a UI component that is placed inside of a
See the
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 |
Attribute | href |
Type | string | undefined |
layout | |
Description | Set the layout of the text and icon in the tab bar.
It defaults to |
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 |
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 |