Fabric Example Pen

fabric-example-pen.markdown

Fabric Example Pen

A Pen by Bar Horing on CodePen.

License.

index.html

<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>

script.typescript

const { Pivot, PivotItem, DefaultButton, Fabric, initializeIcons } = window.Fabric;

// Initialize icons in case this example uses them
initializeIcons();

class PivotSeparateNoSelectedKeyExample extends React.Component<any, any> {
  public state = { selectedKey: 'Settings' };

  public render(): JSX.Element {
    // const pivotItems = { Thing1: <div>thing 1</div>, Thing2: <div>thing 2</div>, Thing3: <div>thing 3</div> };
    const pivotItems = { Home: <div>content for tab #1 - Home<br />create a new gist form here</div> , Things2:<div>content for tab #2</div>};
    const items: { [key: string]: React.ReactElement<any> } = {
      ...pivotItems,
      Settings: <div>settings</div>
    };

    return (
      <div style={{ width: '50%', maxWidth: '500px' }}>
        Current Tab - selectedKey: {this.state.selectedKey || 'null'}
        <div
          style={{
            display: 'flex',
            alignItems: 'center'
          }}
        >
          <Pivot
            style={{ flexGrow: 1 }}
            selectedKey={Object.keys(pivotItems).indexOf(this.state.selectedKey) >= 0 ? this.state.selectedKey : null}
            onLinkClick={this._handleLinkClick}
            headersOnly={true}
            getTabId={this._getTabId}
          >
            {Object.keys(pivotItems).map(name => (
              <PivotItem key={`pivotItemKey_${name}`} headerText={name} itemKey={name} />
            ))}
          </Pivot>
          <DefaultButton
            iconProps={{ iconName: 'Settings', style: { color: this.state.selectedKey === 'Settings' ? 'blue' : 'black' } }}
            onClick={this._handleSettingsIconClick}
            text="Settings"
          />
        </div>
        {items[this.state.selectedKey]}
      </div>
    );
  }

  private _handleSettingsIconClick = () => this.setState({ selectedKey: 'Settings' });

  private _handleLinkClick = (item: PivotItem): void => {
    this.setState({
      selectedKey: item.props.itemKey
    });
  };

  private _getTabId = (itemKey: string): string => {
    return `ShapeColorPivot_${itemKey}`;
  };
}

const PivotSeparateNoSelectedKeyExampleWrapper = () => <Fabric><PivotSeparateNoSelectedKeyExample /></Fabric>;
ReactDOM.render(<PivotSeparateNoSelectedKeyExampleWrapper />, document.getElementById('content'))