office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
55 lines • 2.6 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Nav } from 'office-ui-fabric-react/lib/Nav';
import './Nav.Basic.Example.scss';
var NavBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(NavBasicExample, _super);
function NavBasicExample() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onLinkClick = function (ev, item) {
if (item && item.name === 'News') {
alert('News link clicked');
}
};
return _this;
}
NavBasicExample.prototype.render = function () {
return (React.createElement("div", { className: "ms-NavExample-LeftPane" },
React.createElement(Nav, { groups: [
{
links: [
{
name: 'Home',
url: 'http://example.com',
links: [
{
name: 'Activity',
url: 'http://msn.com',
key: 'key1'
},
{
name: 'MSN',
url: 'http://msn.com',
key: 'key2'
}
],
isExpanded: true
},
{ name: 'Documents', url: 'http://example.com', key: 'key3', isExpanded: true },
{ name: 'Pages', url: 'http://msn.com', key: 'key4' },
{ name: 'Notebook', url: 'http://msn.com', key: 'key5' },
{ name: 'Long Name Test for ellipse', url: 'http://msn.com', key: 'key6' },
{
name: 'News',
url: 'http://cnn.com',
icon: 'News',
key: 'key8'
}
]
}
], onLinkClick: this.onLinkClick, expandedStateText: 'expanded', collapsedStateText: 'collapsed', selectedKey: 'key3' })));
};
return NavBasicExample;
}(React.Component));
export { NavBasicExample };
//# sourceMappingURL=Nav.Basic.Example.js.map