react-stack-layout:基于Flexbox的堆栈布局以做出React

时间:2024-05-31 18:54:45
【文件属性】:

文件名称:react-stack-layout:基于Flexbox的堆栈布局以做出React

文件大小:206KB

文件格式:ZIP

更新时间:2024-05-31 18:54:45

react javascript-library layoutmanager TypeScript

React堆栈布局 用于快速将控件放置在垂直或水平堆栈中的库。 实际上,它是来自桌面应用程序领域的。 理由 很多时候,在开发业务逻辑时,您需要快速地将控件一个接一个地水平排列,例如沿着基线将它们拉出,同时不要忘记它们之间应该有很小的距离。 该逻辑布局很多次,出现重复的布局。 在该库中,我总结了控件布局的最常见情况,并创建了一些基于flexbox的便捷抽象。 加上一点好处:任何人都可以理解此代码。 主意 假设您想以某种方式安排多个控件。 建议不创建带有元素的其他样式的方法,而是创建一个带有占位符的模板(或框架),并在其中放置必要的元素。 我们有什么? 根元素 RowStack-连续排列子级。 ColumnStack-将子级排列在一列中,另一列之下。 占位符 适合-接受与其内容匹配的尺寸。 填充-占据整个可用区域。 固定-具有固定大小。 如何使用 安装 npm install @s


【文件预览】:
react-stack-layout-master
----.babelrc(402B)
----stories()
--------RowStack.stories.tsx(5KB)
--------ColumnStack.stories.tsx(4KB)
--------DemoStyles.less(750B)
----.storybook()
--------config.js(225B)
--------webpack.config.js(915B)
----docs()
--------.babelrc(402B)
--------package.json(3KB)
--------webpack.tsconfig.json(129B)
--------tslint.json(483B)
--------.linters()
--------src()
--------tsconfig.json(1KB)
--------webpack.config.ts(3KB)
--------stylelint.config.js(34KB)
--------.browserslistrc(102B)
--------types()
--------yarn.lock(369KB)
--------.editorconfig(179B)
--------postcss.config.js(74B)
--------.prettierrc.json(199B)
----package.json(2KB)
----LICENSE(1KB)
----src()
--------index.less(3KB)
--------index.d.ts(2KB)
--------index.tsx(6KB)
----tsconfig.json(885B)
----.gitignore(85B)
----webpack.config.js(1KB)
----README.md(3KB)
----yarn.lock(317KB)

网友评论