介绍
@aaronuu/react-layout 是一个基于 React 构建的布局组件库。它提供了丰富的布局方式，包括栅格布局、流式布局、网格布局等。同时，它易于使用，具有灵活性和扩展性。
安装
可以通过 npm 安装 @aaronuu/react-layout：
npm install @aaronuu/react-layout
API
Container
容器组件，提供页面主体内容的布局和样式。
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| fluid | bool | false | 是否开启流式布局 |
| tagName | string | div | 渲染为哪种 HTML 元素。 |
示例
-- -------------------- ---- -------
------ - --------- - ---- -----------------------
-------- ----- -
------ -
-----------
-- ------
------------
-
-Row
行组件，提供栅格布局中的一行。
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| inline | boolean | false | 是否应用行内元素样式 |
| x | number | null | 列数，占据 12 个栅格的几份。 |
| sm | number | null | 小屏幕布局，占据几份栅格 |
| md | number | null | 中等屏幕布局，占据几份栅格 |
| lg | number | null | 大屏幕布局，占据几份栅格 |
| xl | number | null | 超大屏幕布局，占据几份栅格 |
示例
-- -------------------- ---- -------
------ - ---------- --- - ---- -----------------------
-------- ----- -
------ -
-----------
-----
-- ---
------
------------
-
-Col
列组件，提供栅格布局中的一列。必须嵌套在行组件内。
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| inline | boolean | false | 是否应用行内元素样式 |
| span | number | null | 列数，占据 12 个栅格的几份。 |
| xs | number | null | 小屏幕布局，占据几份栅格 |
| sm | number | null | 中等屏幕布局，占据几份栅格 |
| md | number | null | 大屏幕布局，占据几份栅格 |
| lg | number | null | 超大屏幕布局，占据几份栅格 |
| xl | number | null | 超大屏幕布局，占据几份栅格 |
| offset | number | null | 偏移量，占据多少个栅格宽度之外的空间。 |
| order | number | null | 控制列的顺序，越小越靠前。默认为自然顺序 |
示例
-- -------------------- ---- -------
------ - ---------- ---- --- - ---- -----------------------
-------- ----- -
------ -
-----------
-----
---- -------- ------ -------
-- ---
------
------
------------
-
-结尾
$aaronuu/react-layout 是一个非常实用的布局组件库。它允许我们通过简单的配置实现复杂的页面布局，提高了前端开发的效率。在实际项目中，我们可以根据需要选择合适的布局方式，优化页面体验，提高用户满意度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d130d09270238229c6