Pivot.example.tsx

import * as React from 'react';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
const exampleStyles: any = exampleStylesImport;

export class PivotBasicExample extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      isElementVisible: false
    };
  }

  public render(): JSX.Element {
    const theElement = (
      <PivotItem headerText="Recent">
        <Label>Pivot #2</Label>
      </PivotItem>
    );
    return (
      <div>
        <div>
          <button onClick={() => this.setState({ isElementVisible: !this.state.isElementVisible })}>Toggle Element</button>
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </div>
        <div>
          <Pivot>
            <PivotItem
              headerText="My Files"
              headerButtonProps={{
                'data-order': 1,
                'data-title': 'My Files Title'
              }}
            >
              <Label className={exampleStyles.exampleLabel}>Pivot #1</Label>
            </PivotItem>
            {this.state.isElementVisible && theElement}
            <PivotItem headerText="Shared with me">
              <Label>Pivot #3</Label>
            </PivotItem>
          </Pivot>
        </div>
      </div>
    );
  }
}