office-ui-fabric-react/lib/demo/pages/NavPage/examples/Nav.Basic.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport {\n  Nav,\n  INavProps\n} from '../../../../index';\nimport './Nav.Basic.Example.scss';\n\nexport class NavBasicExample extends React.Component<any, any> {\n  constructor(props: INavProps) {\n    super(props);\n    this._onClickHandler = this._onClickHandler.bind(this);\n  }\n\n  public render() {\n    return (\n      <div className='ms-NavExample-LeftPane'>\n        <Nav\n          groups={\n            [\n              {\n                links:\n                [\n                  {\n                  name: 'Home',\n                  url: 'http://example.com',\n                  links: [{\n                    name: 'Activity',\n                    url: 'http://msn.com'\n                    },\n                    {\n                      name: 'News',\n                      url: 'http://msn.com'\n                    }],\n                  isExpanded: true\n                  },\n                  { name: 'Documents', url: 'http://example.com', isExpanded: true },\n                  { name: 'Pages', url: 'http://msn.com' },\n                  { name: 'Notebook', url: 'http://msn.com' },\n                  { name: 'Long Name Test for elipse', url: 'http://msn.com' },\n                  { name: 'Edit Link', url: 'http://example.com', iconClassName: 'ms-Icon--Edit' },\n                  {\n                    name: 'Edit',\n                    url: '#',\n                    onClick: this._onClickHandler,\n                    icon: 'Edit'\n                  }\n                ]\n              }\n            ]\n          }\n          expandedStateText={ 'expanded' }\n          collapsedStateText={ 'collapsed' }\n          />\n       </div>\n    );\n  }\n\n  private _onClickHandler(e: React.MouseEvent<HTMLElement>) {\n    alert('test');\n    return false;\n  }\n}\n";