Tab

Tabs organize content across different screens, data sets, and other interactions. - Material Docs

import { Tab } from 'material-bread';

Using Tab component directly allows you to customize the activeTextColor , inActiveTextColor , rippleProps , textStyles , iconStyles , and more.



FAVORITES



MUSIC



MOVIE



PHOTO

Live Editing

class TabsPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 0
    }
  }

  render() {
    return (
      <Tabs
        selectedIndex={this.state.selectedTab}
        handleChange={index => this.setState({ selectedTab: index })}
        backgroundColor={'#E91E63'}
        actionItems={[
          <Tab key={1} icon="favorite" label="Favorites" />,
          <Tab key={2} icon="music-note" label="Music" />,
          <Tab key={3} icon="tv" label="Movie" />,
          <Tab key={4} icon="camera" label="Photo" />,
        ]}
      />
    );
  }
}

import React, { Component } from 'react';
import { Tabs } from 'material-bread';

class TabsPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 0
    }
  }

  render() {
    return (
      <Tabs
        selectedIndex={this.state.selectedTab}
        handleChange={index => this.setState({ selectedTab: index })}
        actionItems={[
          { icon: 'phone', label: 'Recents' },
          { icon: 'favorite', label: 'Favorites' },
          { icon: 'map', label: 'Nearby' },
          { icon: 'account-circle', label: 'Account' },
        ]}
      />
    );
  }
}

Name

Description

Type

Default

activeTextColor

Color when item is active

string

#fff

icon

Name of icon component above text

string

iconStyles

Styles for icon element

object

inActiveTextColor

Color when item is active

string

rgba(255,255,255, .65)

label

Displays text under an icon

string

onPress

Callback on item

func

rippleProps

Props spread to root ripple component

object

style

Styles root element

object

textStyle

Styles for text element

object

You can see even more examples in the Storybook environment.



RECENTS



FAVORITES



NEARBY



ACCOUNT

Live Editing

class TabsPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 0
    }
  }

  render() {
    return (
      <Tabs
        selectedIndex={this.state.selectedTab}
        handleChange={index => this.setState({ selectedTab: index })}
        actionItems={[
          <Tab key={1} icon="phone" label="Recents" style={{ backgroundColor: '#9C27B0' }} />,
          <Tab key={2} icon="favorite" label="Favorites" style={{ backgroundColor: '#009688' }} />,
          <Tab key={3} icon="map" label="Nearby" />,
          <Tab key={4} icon="account-circle" label="Account" style={{ backgroundColor: '#E91E63' }} />,
        ]}
      />
    );
  }
}

Tab

Component #

Usage #

Props #

Demos #

Styled #