@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
37 lines • 2.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var office_ui_fabric_react_1 = require("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 ButtonStack = function (props) { return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, gap: buttonGap }, props.children)); };
// tslint:disable:jsx-no-lambda
var MenuButtonExample = /** @class */ (function (_super) {
tslib_1.__extends(MenuButtonExample, _super);
function MenuButtonExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
MenuButtonExample.prototype.render = function () {
return (React.createElement(office_ui_fabric_react_1.Stack, { gap: sectionGap },
React.createElement(office_ui_fabric_react_1.Stack, { gap: headingGap, padding: 8 },
React.createElement("div", null,
React.createElement(office_ui_fabric_react_1.Stack, { gap: buttonGap },
React.createElement(ButtonStack, null,
React.createElement(experiments_1.MenuButton, { content: "Menu button", menu: buttonMenu }),
React.createElement(experiments_1.MenuButton, { primary: true, content: "Menu primary button", menu: buttonMenu }),
React.createElement(experiments_1.MenuButton, { disabled: true, content: "Menu disabled button", menu: buttonMenu })),
React.createElement(ButtonStack, null,
React.createElement(experiments_1.MenuButton, { icon: "Share", menu: buttonMenu },
React.createElement(office_ui_fabric_react_1.Stack, { padding: "8px 0", as: "span", horizontalAlign: "start" },
React.createElement(office_ui_fabric_react_1.Text, null, "I am a compound multiline button."),
React.createElement(office_ui_fabric_react_1.Text, { variant: "small" }, "I can have a caption.")))))))));
};
return MenuButtonExample;
}(React.Component));
exports.MenuButtonExample = MenuButtonExample;
//# sourceMappingURL=MenuButton.Example.js.map