Tabs

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

import { Tabs } from 'material-bread';

The Tabs component provides a wrapper around the Tab s component to handle the index and Underline . You can further customize actionItems by passing in the Tab component directly.



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={[
          { icon: 'phone', label: 'Recents' },
          { icon: 'favorite', label: 'Favorites' },
          { icon: 'map', label: 'Nearby' },
          { icon: 'account-circle', label: 'Account' },
        ]}
      />
    );
  }
}

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

actionItems

Array of objects displaying tab items

array

backgroundColor

Background Color for root component

string

theme.primary.main

handleChange

fires when a Tab is clicked, handles changing tabs

func

scrollEnabled

Toggles whether tabs should be scrollable or squish to fit into width

bool

false

selectedIndex

Index of currently active Item

number

style

Styles root element

object

underlineColor

Color for underline

string

theme.primary.main

underlineHeight

Height for underline

number

You can see even more examples in the Storybook environment.

DOGS

CATS

BIRDS

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={'#9C27B0'}
        actionItems={[
          { label: 'Dogs' },
          { label: 'Cats' },
          { label: 'Birds' },
        ]}
      />
    );
  }
}







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={'#009688'}
        actionItems={[
          { icon: 'access-time' },
          { icon: 'shopping-cart' },
          { icon: 'shop' },
        ]}
      />
    );
  }
}



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 })}
        backgroundColor={'#E91E63'}
        scrollEnabled
        actionItems={[
          { icon: 'phone', label: 'Recents' },
          { icon: 'favorite', label: 'Favorites' },
          { icon: 'map', label: 'Nearby' },
          { icon: 'account-circle', label: 'Account' },
        ]}
      />
    );
  }
}

Tabs

Component #

Usage #

Props #

Demos #

Labels #

Icons #

Scrollable #