Skip to content

Latest commit

 

History

History

tab-indicator

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

React Tab Indicator

A React version of an MDC Tab Indicator.

Installation

npm install @material/react-tab-indicator

Usage

Styles

with Sass:

import '@material/react-tab-indicator/index.scss';

with CSS:

import '@material/react-tab-indicator/dist/tab-indicator.css';

Javascript Instantiation

With an Underline (default)

import React from 'react';
import TabIndicator from '@material/react-tab-indicator';

class MyApp extends React.Component {
  state = {active: false};

  render() {
    return (
      <div>
        <TabIndicator active={this.state.active} />
      </div>
    );
  }
}

With Icon

If you want the underline instead of an icon, pass the icon element as a child of the Tab Indicator component.

import React from 'react';
import TabIndicator from '@material/react-tab-indicator';
import MaterialIcon from '@material/react-material-icon';

class MyApp extends React.Component {
  state = {active: false};

  render() {
    return (
      <div>
        <TabIndicator
          active={this.state.active}
          icon
        >
          <MaterialIcon icon='star' />
        </TabIndicator>
      </div>
    );
  }
}

Props

Prop Name Type Description
active boolean If true will activate the indicator.
className string Classes to appear on className attribute of root element.
fade boolean If enabled will use the fade animation for transitioning to other tabs.
icon boolean Indicates that the indicator is an icon instead of an underline.
previousIndicatorClientRect ClientRect The indicator's clientRect that was previously activated.
onTransitionEnd function transitionend event callback handler.

Sass Mixins

Sass mixins may be available to customize various aspects of the components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins

Usage with Icons

Please see our Best Practices doc when importing or using icon fonts.