ion-tab-button

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4底部Tabs组件组件ion-tab-button对项目进行布局。ion-tab-button中有ionic ion-tab-button 用法(Usage) ,ionic ion-tab-button 属性(Properties) ,ionic ion-tab-button 中的CSS 自定义属性等

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)

angular javascript
<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>

ion-tab-button 属性(Properties)

disabled

Description

The selected tab component

Attribute disabled
Type boolean

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

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