@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
37 lines • 2.72 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { SplitMenuButton } from '@uifabric/experiments';
import { Stack } from 'office-ui-fabric-react';
var menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
var buttonMenu = function (render) { return render(function (MenuType, props) { return React.createElement(MenuType, tslib_1.__assign({}, props, { items: menuItems })); }); };
var sectionGap = 32;
var headingGap = 16;
var buttonGap = 12;
var alertClicked = function () {
alert('Clicked');
};
var ButtonStack = function (props) { return (React.createElement(Stack, { horizontal: true, disableShrink: true, gap: buttonGap }, props.children)); };
// tslint:disable:jsx-no-lambda
var SplitMenuButtonExample = /** @class */ (function (_super) {
tslib_1.__extends(SplitMenuButtonExample, _super);
function SplitMenuButtonExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
SplitMenuButtonExample.prototype.render = function () {
return (React.createElement(Stack, { gap: sectionGap },
React.createElement(Stack, { gap: headingGap, padding: 8 },
React.createElement("div", null,
React.createElement(Stack, { gap: buttonGap },
React.createElement(ButtonStack, null,
React.createElement(SplitMenuButton, { icon: "Add", content: "Default split button", menu: buttonMenu, onClick: alertClicked }),
React.createElement(SplitMenuButton, { disabled: true, icon: "Add", content: "Disabled split button", menu: buttonMenu, onClick: alertClicked }),
React.createElement(SplitMenuButton, { primary: true, icon: "Add", content: "Primary split button", menu: buttonMenu, onClick: alertClicked }),
React.createElement(SplitMenuButton, { disabled: true, primary: true, icon: "Add", content: "Disabled primary split button", menu: buttonMenu, onClick: alertClicked })),
React.createElement(ButtonStack, null,
React.createElement(SplitMenuButton, { primaryActionDisabled: true, icon: "Add", content: "First action disabled split button", menu: buttonMenu, onClick: alertClicked }),
React.createElement(SplitMenuButton, { primaryActionDisabled: true, primary: true, icon: "Add", content: "First action disabled primary split button", menu: buttonMenu, onClick: alertClicked })))))));
};
return SplitMenuButtonExample;
}(React.Component));
export { SplitMenuButtonExample };
//# sourceMappingURL=SplitMenuButton.Example.js.map