lucid-ui
Version:
A UI component library from Xandr.
58 lines • 2.22 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithFlex = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var Resizer_1 = __importDefault(require("./Resizer"));
exports.default = {
title: 'Utility/Resizer',
component: Resizer_1.default,
parameters: {
docs: {
description: {
component: Resizer_1.default.peek.description,
},
},
},
};
/* Basic */
var Basic = function (args) {
return (react_1.default.createElement(Resizer_1.default, null, function (width, height) { return (react_1.default.createElement("div", null,
react_1.default.createElement("div", null,
"Width: ",
width),
react_1.default.createElement("div", null,
"Height: ",
height))); }));
};
exports.Basic = Basic;
/* With Flex */
var WithFlex = function (args) {
return (react_1.default.createElement("section", { style: {
display: 'flex',
} },
react_1.default.createElement("div", null, "Other content"),
react_1.default.createElement(Resizer_1.default, { style: {
flexGrow: 1,
overflow: 'hidden',
} }, function (width) { return (react_1.default.createElement("div", { style: {
width: width,
height: width * 0.3,
border: '1px solid black',
} },
react_1.default.createElement("div", null,
"When using Resizer within a flexed container, its critical to add",
' ',
react_1.default.createElement("code", null, "flexGrow: 1, overflow: 'hidden'"),
" to its styles so it will behave correctly."),
react_1.default.createElement("div", null,
"Width: ",
width),
react_1.default.createElement("div", null,
"Height: ",
width * 0.3))); })));
};
exports.WithFlex = WithFlex;
//# sourceMappingURL=Resizer.stories.js.map