office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
90 lines • 3.59 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import './ContextualMenuExample.scss';
var ContextualMenuHeaderExample = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuHeaderExample, _super);
function ContextualMenuHeaderExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ContextualMenuHeaderExample.prototype.render = function () {
return (React.createElement(DefaultButton, { id: "ContextualMenuButton1", text: "Click for ContextualMenu", menuProps: {
shouldFocusOnMount: true,
items: [
{
key: 'Actions',
itemType: 2,
text: 'Actions'
},
{
key: 'upload',
iconProps: {
iconName: 'Upload',
style: {
color: 'salmon'
}
},
text: 'Upload',
title: 'Upload a file'
},
{
key: 'rename',
text: 'Rename'
},
{
key: 'share',
iconProps: {
iconName: 'Share'
},
subMenuProps: {
items: [
{
key: 'sharetoemail',
text: 'Share to Email',
iconProps: {
iconName: 'Mail'
}
},
{
key: 'sharetofacebook',
text: 'Share to Facebook'
},
{
key: 'sharetotwitter',
text: 'Share to Twitter',
iconProps: {
iconName: 'Share'
}
}
]
},
text: 'Sharing'
},
{
key: 'navigation',
itemType: 2,
text: 'Navigation'
},
{
key: 'properties',
text: 'Properties'
},
{
key: 'print',
iconProps: {
iconName: 'Print'
},
text: 'Print'
},
{
key: 'Bing',
text: 'Go to Bing',
href: 'http://www.bing.com'
}
]
} }));
};
return ContextualMenuHeaderExample;
}(React.Component));
export { ContextualMenuHeaderExample };
//# sourceMappingURL=ContextualMenu.Header.Example.js.map