@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
55 lines • 2.76 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments", "office-ui-fabric-react", "./SlotExampleUtils"], function (require, exports, tslib_1, React, experiments_1, office_ui_fabric_react_1, SlotExampleUtils_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ButtonTheme = {
scopedSettings: {
Icon: {
styles: {
root: {
fontSize: 24,
color: 'purple'
}
}
},
Stack: {
styles: {
root: {
background: 'lightblue'
}
}
},
Text: {
styles: {
root: {
color: 'purple'
}
}
}
}
};
var getButtonStyles = {
icon: ButtonTheme.scopedSettings.Icon.styles.root,
stack: ButtonTheme.scopedSettings.Stack.styles.root,
content: ButtonTheme.scopedSettings.Text.styles.root
};
// tslint:disable:jsx-no-lambda
// tslint:disable:jsx-key
var SlotsStyledExample = /** @class */ (function (_super) {
tslib_1.__extends(SlotsStyledExample, _super);
function SlotsStyledExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
SlotsStyledExample.prototype.render = function () {
return (React.createElement(office_ui_fabric_react_1.Stack, null,
React.createElement(office_ui_fabric_react_1.Stack, tslib_1.__assign({}, SlotExampleUtils_1.stackProps),
React.createElement(experiments_1.Button, { icon: { iconName: 'share', styles: ButtonTheme.scopedSettings.Icon.styles }, content: "Icon as IIconProps with styles" }),
React.createElement(experiments_1.Button, { icon: "share", content: { children: 'Text as ITextProps with styles', styles: ButtonTheme.scopedSettings.Text.styles } }),
React.createElement(experiments_1.Button, { icon: { iconName: 'share', styles: { root: { color: 'red' } } }, styles: getButtonStyles, content: "Button styles prop" }),
React.createElement(office_ui_fabric_react_1.Customizer, tslib_1.__assign({}, ButtonTheme),
React.createElement(experiments_1.Button, { icon: { iconName: 'share' }, content: "Button scopedSettings" })))));
};
return SlotsStyledExample;
}(React.Component));
exports.SlotsStyledExample = SlotsStyledExample;
});
//# sourceMappingURL=Slots.Styled.Example.js.map