grommet
Version:
focus on the essential experience
57 lines (56 loc) • 1.72 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = exports.FixedSizesBox = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var FixedSizesBox = exports.FixedSizesBox = function FixedSizesBox() {
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
_react["default"].createElement(_grommet.Box, {
pad: "small",
gap: "small"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
width: "small",
height: "small",
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: {
horizontal: 'hidden',
vertical: 'scroll'
},
tabIndex: 0
}, Array(20).fill().map(function (_, i) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
_react["default"].createElement(_grommet.Text, {
key: i
}, "Small (" + i + ")")
);
})), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
width: "medium",
height: "medium",
round: "small",
align: "center",
justify: "center",
background: "brand"
}, "Medium"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
width: "large",
height: "large",
round: "small",
align: "center",
justify: "center",
background: "brand"
}, "Large"))
// </Grommet>
);
};
FixedSizesBox.storyName = 'Fixed sizes';
var _default = exports["default"] = {
title: 'Layout/Box/Fixed sizes'
};