grommet
Version:
focus on the essential experience
216 lines • 6.46 kB
JavaScript
import React from 'react';
import { Box, Text } from 'grommet';
export var MinMaxSizesBox = function MinMaxSizesBox() {
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
React.createElement(Box, {
pad: "small",
gap: "small"
}, /*#__PURE__*/React.createElement(Box, {
pad: "small",
gap: "small",
direction: "row",
align: "start"
}, /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max-height=small")), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max-height=small"), /*#__PURE__*/React.createElement(Text, null, "max-height=small"), /*#__PURE__*/React.createElement(Text, null, "max-height=small")), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto",
tabIndex: 0
}, Array(20).fill().map(function (_, i) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(Text, {
key: i
}, "Small (" + i + ")")
);
})), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
max: '100px'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto",
tabIndex: 0
}, Array(20).fill().map(function (_, i) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(Text, {
key: i
}, "Small (" + i + ")")
);
}))), /*#__PURE__*/React.createElement(Box, {
pad: "small",
gap: "small",
direction: "row",
align: "start"
}, /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
min: '100px'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "min-height=100px")), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "min-height=small")), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "min-height=small"), /*#__PURE__*/React.createElement(Text, null, "min-height=small"), /*#__PURE__*/React.createElement(Text, null, "min-height=small")), /*#__PURE__*/React.createElement(Box, {
width: "small",
height: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, Array(20).fill().map(function (_, i) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(Text, {
key: i
}, "Small (" + i + ")")
);
}))), /*#__PURE__*/React.createElement(Box, {
pad: "small",
gap: "small",
direction: "row",
align: "start"
}, /*#__PURE__*/React.createElement(Box, {
width: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max")), /*#__PURE__*/React.createElement(Box, {
width: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max-width=small")), /*#__PURE__*/React.createElement(Box, {
width: {
max: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max-width=small, max-width=small")), /*#__PURE__*/React.createElement(Box, {
width: {
max: '100px'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "max-width=100px, max-width=100px"))), /*#__PURE__*/React.createElement(Box, {
pad: "small",
gap: "small",
direction: "row",
align: "start"
}, /*#__PURE__*/React.createElement(Box, {
width: {
min: '100px'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "100px")), /*#__PURE__*/React.createElement(Box, {
width: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "small")), /*#__PURE__*/React.createElement(Box, {
width: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "min-width=small")), /*#__PURE__*/React.createElement(Box, {
width: {
min: 'small'
},
round: "small",
align: "center",
justify: "center",
background: "brand",
overflow: "auto"
}, /*#__PURE__*/React.createElement(Text, null, "min-width=small, min-width=small"))))
// </Grommet>
);
};
MinMaxSizesBox.storyName = 'Min and max sizes';
export default {
title: 'Layout/Box/Min and max sizes'
};