closure-react-tab

0.7.9 • Public • Published

React Tab

A React version of an MDC Tab.

Installation

npm install @material/react-tab

Usage

Styles

with Sass:

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

with CSS:

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

Javascript Instantiation

With an Underline (default)

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

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

  render() {
    return (
      <Tab active={this.state.active}>
        <MaterialIcon className='mdc-tab__icon' icon='favorite' />
        <span className='mdc-tab__text-label'>Love</span>
      </Tab>
    );
  }
}

With Custom Indicator

Possibly you don't want to use the default underline indicator, but instead would like to use an icon. You'll need to add an indicatorContent prop, which should be set to an icon element.

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

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

  render() {
    return (
      <Tab
        active={this.state.active}
        indicatorContent={<MaterialIcon icon='favorite' />}
      >
        <span className='mdc-tab__text-label'>Love</span>
      </Tab>
    );
  }
}

Props

Prop Name Type Description
active boolean If true will activate the tab and indicator.
className string Classes to appear on className attribute of root element.
isFadingIndicator boolean Enables a fading indicator, instead of sliding (default).
indicatorContent element Element that will appear within the <TabIndicator /> element.
minWidth boolean If true will display the <Tab /> as narrow as possible.
isMinWidthIndicator boolean If true will display the <TabIndicator /> to the size of the longest content element.
isIconIndicator boolean If true will display the indicator content in the center of the tab.
previousIndicatorClientRect ClientRect The indicator's clientRect that was previously activated.
stacked boolean If true will display the tab icon and label to flow vertically instead of horizontally.
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.

Package Sidebar

Install

npm i closure-react-tab

Weekly Downloads

3

Version

0.7.9

License

MIT

Unpacked Size

588 kB

Total Files

19

Last publish

Collaborators

  • yang_ji