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