@uifabric/experiments/lib-amd/components/Button/examples/Button.Example.js

Experimental React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "../index", "office-ui-fabric-react"], function (require, exports, tslib_1, React, index_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var sectionGap = 32;
    var headingGap = 16;
    var buttonGap = 12;
    var alertClicked = function () {
        alert('Clicked');
    };
    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 ButtonExample = /** @class */ (function (_super) {
        tslib_1.__extends(ButtonExample, _super);
        function ButtonExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ButtonExample.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(index_1.Button, { content: "Default button", onClick: alertClicked }),
                                React.createElement(index_1.Button, { disabled: true, content: "Disabled default button", onClick: alertClicked }),
                                React.createElement(index_1.Button, { primary: true, content: "Primary button", onClick: alertClicked }),
                                React.createElement(index_1.Button, { primary: true, disabled: true, content: "Disabled primary button", onClick: alertClicked })),
                            React.createElement(ButtonStack, null,
                                React.createElement(index_1.Button, { icon: "PeopleAdd", circular: true }),
                                React.createElement(index_1.Button, { icon: "Phone", circular: true, disabled: true }),
                                React.createElement(index_1.Button, { icon: "FontSize", circular: true, primary: true }),
                                React.createElement(index_1.Button, { icon: "Attach", circular: true, primary: true, disabled: true })),
                            React.createElement(ButtonStack, null,
                                React.createElement(index_1.Button, { icon: "Upload", content: "Button with string icon" }),
                                React.createElement(index_1.Button, { icon: { iconName: 'Share' }, content: "Button with iconProps" }),
                                React.createElement(index_1.Button, { icon: function () { return React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Download" }); }, content: "Button with icon render function" })),
                            React.createElement(ButtonStack, null,
                                React.createElement(index_1.Button, null,
                                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Upload" }),
                                    React.createElement(office_ui_fabric_react_1.Text, null, "With custom text/icon")),
                                React.createElement(index_1.Button, { primary: true },
                                    React.createElement(office_ui_fabric_react_1.Text, null, "With custom text/icon right aligned"),
                                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Upload" }))),
                            React.createElement(office_ui_fabric_react_1.CommandBar, { items: [{ key: '0', text: 'Button 1', iconProps: { iconName: 'Upload' } }] }))))));
        };
        return ButtonExample;
    }(React.Component));
    exports.ButtonExample = ButtonExample;
});
//# sourceMappingURL=Button.Example.js.map