define(["require", "exports", "tslib", "react", "@uifabric/experiments", "office-ui-fabric-react"], function (require, exports, tslib_1, React, experiments_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var stackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
    var SlotsExample = /** @class */ (function (_super) {
        tslib_1.__extends(SlotsExample, _super);
        function SlotsExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SlotsExample.prototype.render = function () {
            return (React.createElement(office_ui_fabric_react_1.Stack, tslib_1.__assign({}, stackProps, { maxWidth: 400 }),
                React.createElement(experiments_1.Button
                // Render function usage, wrapping default content
                , { 
                    // Render function usage, wrapping default content
                    slots: {
                        root: {
                            render: function (rootProps, DefaultComponent) { return (React.createElement(office_ui_fabric_react_1.TooltipHost, { content: "This is the tooltip" },
                                React.createElement(DefaultComponent, tslib_1.__assign({}, rootProps)))); },
                        },
                        content: {
                            // TODO: add 'element' option with JSX?
                            // element: <Spinner />
                            component: office_ui_fabric_react_1.Spinner,
                        },
                    }, 
                    // Shorthand prop usage
                    icon: "share" }, "Just a button with a spinner as its content.")));
        };
        return SlotsExample;
    }(React.Component));
    exports.SlotsExample = SlotsExample;
});
//# sourceMappingURL=Slots.Example.js.map