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

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Button } from '../index';
import { Icon, CommandBar, Stack, Text } from 'office-ui-fabric-react';
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 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(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(Button, { content: "Default button", onClick: alertClicked }),
                            React.createElement(Button, { disabled: true, content: "Disabled default button", onClick: alertClicked }),
                            React.createElement(Button, { primary: true, content: "Primary button", onClick: alertClicked }),
                            React.createElement(Button, { primary: true, disabled: true, content: "Disabled primary button", onClick: alertClicked })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", circular: true }),
                            React.createElement(Button, { icon: "Phone", circular: true, disabled: true }),
                            React.createElement(Button, { icon: "FontSize", circular: true, primary: true }),
                            React.createElement(Button, { icon: "Attach", circular: true, primary: true, disabled: true })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "Upload", content: "Button with string icon" }),
                            React.createElement(Button, { icon: { iconName: 'Share' }, content: "Button with iconProps" }),
                            React.createElement(Button, { icon: function () { return React.createElement(Icon, { iconName: "Download" }); }, content: "Button with icon render function" })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, null,
                                React.createElement(Icon, { iconName: "Upload" }),
                                React.createElement(Text, null, "With custom text/icon")),
                            React.createElement(Button, { primary: true },
                                React.createElement(Text, null, "With custom text/icon right aligned"),
                                React.createElement(Icon, { iconName: "Upload" }))),
                        React.createElement(CommandBar, { items: [{ key: '0', text: 'Button 1', iconProps: { iconName: 'Upload' } }] }))))));
    };
    return ButtonExample;
}(React.Component));
export { ButtonExample };
//# sourceMappingURL=Button.Example.js.map