lucid-ui
Version:
A UI component library from Xandr.
50 lines • 1.66 kB
JavaScript
import React from 'react';
import Resizer from './Resizer';
export default {
title: 'Utility/Resizer',
component: Resizer,
parameters: {
docs: {
description: {
component: Resizer.peek.description,
},
},
},
};
/* Basic */
export const Basic = (args) => {
return (React.createElement(Resizer, null, (width, height) => (React.createElement("div", null,
React.createElement("div", null,
"Width: ",
width),
React.createElement("div", null,
"Height: ",
height)))));
};
/* With Flex */
export const WithFlex = (args) => {
return (React.createElement("section", { style: {
display: 'flex',
} },
React.createElement("div", null, "Other content"),
React.createElement(Resizer, { style: {
flexGrow: 1,
overflow: 'hidden',
} }, (width) => (React.createElement("div", { style: {
width,
height: width * 0.3,
border: '1px solid black',
} },
React.createElement("div", null,
"When using Resizer within a flexed container, its critical to add",
' ',
React.createElement("code", null, "flexGrow: 1, overflow: 'hidden'"),
" to its styles so it will behave correctly."),
React.createElement("div", null,
"Width: ",
width),
React.createElement("div", null,
"Height: ",
width * 0.3))))));
};
//# sourceMappingURL=Resizer.stories.js.map