office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
77 lines • 2.71 kB
JavaScript
var _a;
import * as React from 'react';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
var overflowProps = { ariaLabel: 'More commands' };
export var CommandBarBasicExample = function () {
return (React.createElement("div", null,
React.createElement(CommandBar, { items: _items, overflowItems: _overflowItems, overflowButtonProps: overflowProps, farItems: _farItems, ariaLabel: "Use left and right arrow keys to navigate between commands" })));
};
var _items = [
{
key: 'newItem',
text: 'New',
cacheKey: 'myCacheKey',
iconProps: { iconName: 'Add' },
subMenuProps: {
items: [
(_a = {
key: 'emailMessage',
text: 'Email message',
iconProps: { iconName: 'Mail' }
},
_a['data-automation-id'] = 'newEmailButton' // optional
,
_a),
{
key: 'calendarEvent',
text: 'Calendar event',
iconProps: { iconName: 'Calendar' }
}
]
}
},
{
key: 'upload',
text: 'Upload',
iconProps: { iconName: 'Upload' },
href: 'https://dev.office.com/fabric'
},
{
key: 'share',
text: 'Share',
iconProps: { iconName: 'Share' },
onClick: function () { return console.log('Share'); }
},
{
key: 'download',
text: 'Download',
iconProps: { iconName: 'Download' },
onClick: function () { return console.log('Download'); }
}
];
var _overflowItems = [
{ key: 'move', text: 'Move to...', onClick: function () { return console.log('Move to'); }, iconProps: { iconName: 'MoveToFolder' } },
{ key: 'copy', text: 'Copy to...', onClick: function () { return console.log('Copy to'); }, iconProps: { iconName: 'Copy' } },
{ key: 'rename', text: 'Rename...', onClick: function () { return console.log('Rename'); }, iconProps: { iconName: 'Edit' } }
];
var _farItems = [
{
key: 'tile',
text: 'Grid view',
// This needs an ariaLabel since it's icon-only
ariaLabel: 'Grid view',
iconOnly: true,
iconProps: { iconName: 'Tiles' },
onClick: function () { return console.log('Tiles'); }
},
{
key: 'info',
text: 'Info',
// This needs an ariaLabel since it's icon-only
ariaLabel: 'Info',
iconOnly: true,
iconProps: { iconName: 'Info' },
onClick: function () { return console.log('Info'); }
}
];
//# sourceMappingURL=CommandBar.Basic.Example.js.map