@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
65 lines • 5.74 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/Shimmer", "./Shimmer.Example.scss"], function (require, exports, tslib_1, React, Shimmer_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ShimmerCustomElementsExample = /** @class */ (function (_super) {
tslib_1.__extends(ShimmerCustomElementsExample, _super);
function ShimmerCustomElementsExample(props) {
var _this = _super.call(this, props) || this;
_this._getCustomElementsExampleOne = function () {
return (React.createElement("div", {
// tslint:disable-next-line:jsx-ban-props
style: { display: 'flex' } },
React.createElement(Shimmer_1.ShimmerElementsGroup, { shimmerElements: [{ type: Shimmer_1.ShimmerElementType.line, widthInPixel: 40, height: 40 }, { type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 10, height: 40 }] }),
React.createElement(Shimmer_1.ShimmerElementsGroup, { flexWrap: true, shimmerElements: [
{ type: Shimmer_1.ShimmerElementType.line, widthInPixel: 300, height: 10 },
{ type: Shimmer_1.ShimmerElementType.line, widthInPixel: 200, height: 10 },
{ type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 100, height: 20 }
] })));
};
_this._getCustomElementsExampleTwo = function () {
return (React.createElement("div", {
// tslint:disable-next-line:jsx-ban-props
style: { display: 'flex' } },
React.createElement(Shimmer_1.ShimmerElementsGroup, { shimmerElements: [{ type: Shimmer_1.ShimmerElementType.circle, height: 40 }, { type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 10, height: 40 }] }),
React.createElement(Shimmer_1.ShimmerElementsGroup, { flexWrap: true, shimmerElements: [
{ type: Shimmer_1.ShimmerElementType.line, widthInPixel: 400, height: 10 },
{ type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 100, height: 20 },
{ type: Shimmer_1.ShimmerElementType.line, widthInPixel: 500, height: 10 }
] })));
};
_this._getCustomElementsExampleThree = function () {
return (React.createElement("div", {
// tslint:disable-next-line:jsx-ban-props
style: { display: 'flex' } },
React.createElement(Shimmer_1.ShimmerElementsGroup, { width: '90px', shimmerElements: [{ type: Shimmer_1.ShimmerElementType.line, height: 80, widthInPixel: 80 }, { type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 10, height: 80 }] }),
React.createElement("div", {
// tslint:disable-next-line:jsx-ban-props
style: { display: 'flex', flexWrap: 'wrap', width: '100%' } },
React.createElement(Shimmer_1.ShimmerElementsGroup, { shimmerElements: [{ type: Shimmer_1.ShimmerElementType.circle, height: 40 }, { type: Shimmer_1.ShimmerElementType.gap, widthInPixel: 10, height: 40 }] }),
React.createElement(Shimmer_1.ShimmerElementsGroup, { flexWrap: true, width: 'calc(100% - 50px)', shimmerElements: [
{ type: Shimmer_1.ShimmerElementType.line, widthInPercentage: 90, height: 10 },
{ type: Shimmer_1.ShimmerElementType.gap, widthInPercentage: 10, height: 20 },
{ type: Shimmer_1.ShimmerElementType.line, widthInPercentage: 100, height: 10 }
] }),
React.createElement(Shimmer_1.ShimmerElementsGroup, { flexWrap: true, width: '100%', shimmerElements: [
{ type: Shimmer_1.ShimmerElementType.line, widthInPercentage: 80, height: 10, verticalAlign: Shimmer_1.ShimmerElementVerticalAlign.bottom },
{ type: Shimmer_1.ShimmerElementType.gap, widthInPercentage: 20, height: 20 },
{ type: Shimmer_1.ShimmerElementType.line, widthInPercentage: 40, height: 10, verticalAlign: Shimmer_1.ShimmerElementVerticalAlign.bottom },
{ type: Shimmer_1.ShimmerElementType.gap, widthInPercentage: 2, height: 20 },
{ type: Shimmer_1.ShimmerElementType.line, widthInPercentage: 58, height: 10, verticalAlign: Shimmer_1.ShimmerElementVerticalAlign.bottom }
] }))));
};
return _this;
}
ShimmerCustomElementsExample.prototype.render = function () {
return (React.createElement("div", { className: "shimmerBasicExample-container" },
"Using ShimmerElementsGroup component to build complex structures of the placeholder you need.",
React.createElement(Shimmer_1.Shimmer, { customElementsGroup: this._getCustomElementsExampleOne(), widthInPixel: 350 }),
React.createElement(Shimmer_1.Shimmer, { customElementsGroup: this._getCustomElementsExampleTwo(), widthInPixel: 550 }),
React.createElement(Shimmer_1.Shimmer, { customElementsGroup: this._getCustomElementsExampleThree(), widthInPercentage: 90 })));
};
return ShimmerCustomElementsExample;
}(React.Component));
exports.ShimmerCustomElementsExample = ShimmerCustomElementsExample;
});
//# sourceMappingURL=Shimmer.CustomElements.Example.js.map