office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
51 lines • 2.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Stack_1 = require("../Stack");
var Styling_1 = require("office-ui-fabric-react/lib/Styling");
var HorizontalStackVerticalAlignExample = /** @class */ (function (_super) {
tslib_1.__extends(HorizontalStackVerticalAlignExample, _super);
function HorizontalStackVerticalAlignExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
HorizontalStackVerticalAlignExample.prototype.render = function () {
var styles = Styling_1.mergeStyleSets({
root: {
background: Styling_1.DefaultPalette.themeTertiary,
height: 100,
selectors: {
'> *': {
width: 50,
height: 50,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: Styling_1.DefaultPalette.themePrimary,
color: Styling_1.DefaultPalette.white
}
}
}
});
var stackTokens = { childrenGap: 5 };
return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
React.createElement("span", null, "Top-aligned"),
React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "start", className: styles.root },
React.createElement("span", null, "1"),
React.createElement("span", null, "2"),
React.createElement("span", null, "3")),
React.createElement("span", null, "Vertically centered"),
React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "center", className: styles.root },
React.createElement("span", null, "1"),
React.createElement("span", null, "2"),
React.createElement("span", null, "3")),
React.createElement("span", null, "Bottom-aligned"),
React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "end", className: styles.root },
React.createElement("span", null, "1"),
React.createElement("span", null, "2"),
React.createElement("span", null, "3"))));
};
return HorizontalStackVerticalAlignExample;
}(React.Component));
exports.HorizontalStackVerticalAlignExample = HorizontalStackVerticalAlignExample;
//# sourceMappingURL=Stack.Horizontal.VerticalAlign.Example.js.map