npm package: @riil-frontend/component-layout
Description: 这是新监控的前端布局组件
Latest version: 1.0.1-a.18

# LayoutCom

layout-com

这是新监控的前端布局组件

简介：LayoutCom

#布局组件使用说明

## Layout ，布局容器

| 属性      | 类型   | 说明         | 默认值 | 必填   |
| --------- | ------ | ------------ | ------ | ------ |
| className | String | 扩展样式类名 | layout | 非必填 |

## Top 头部布局（默认高度 54px）

| 属性      | 类型    | 说明                              | 默认值 | 必填   |
| --------- | ------- | --------------------------------- | ------ | ------ |
| className | String  | 扩展样式类名                      | top    | 非必填 |
| style     | Object  | 自定样式布局                      |        | 非必填 |
| grid      | number  | 纵向栅格布局                      |        | 非必填 |
| mg        | boolean | 是否开启外边距                    | false  | 非必填 |
| mgL       | boolean | 是否开启左侧外边距                | false  | 非必填 |
| mgR       | boolean | 是否开启右侧外边距                | false  | 非必填 |
| mgT       | boolean | 是否开启顶部外边距                | false  | 非必填 |
| mgB       | boolean | 是否开启底部外边距                | false  | 非必填 |
| mgSize    | String  | 外边距尺寸，对应主题包的 s-1~s-12 | s-4    | 非必填 |

## CTop 次头部（使用场景，面包屑，默认高度 40px）

| 属性   | 类型    | 说明                              | 默认值 | 必填   |
| ------ | ------- | --------------------------------- | ------ | ------ |
| style  | Object  | 自定样式布局                      | ctop   | 非必填 |
| grid   | number  | 纵向栅格布局                      |        | 非必填 |
| mg     | boolean | 是否开启外边距                    | false  | 非必填 |
| mgL    | boolean | 是否开启左侧外边距                | false  | 非必填 |
| mgR    | boolean | 是否开启右侧外边距                | false  | 非必填 |
| mgT    | boolean | 是否开启顶部外边距                | false  | 非必填 |
| mgB    | boolean | 是否开启底部外边距                | false  | 非必填 |
| mgSize | String  | 外边距尺寸，对应主题包的 s-1~s-12 | s-4    | 非必填 |

## Content 内容组件布局

| 属性                 | 类型    | 说明                                                | 默认值         | 必填   |
| -------------------- | ------- | --------------------------------------------------- | -------------- | ------ |
| className            | String  | 扩展样式类名                                        | content        | 非必填 |
| style                | Object  | 自定样式布局                                        |                | 非必填 |
| hasClose             | boolean | 是否显示关闭按钮                                    | false          | 非必填 |
| closeContent         | func    | 点击内容区域关闭按钮回调                            |                | 非必填 |
| isOpenContent        | boolean | 是否打开内容布局                                    | true           | 非必填 |
| flex                 | number  | 横向占比，与拖拽列表同用时不要使用此属性，范围 1~24 |                | 非必填 |
| hasMutiWindow        | boolean | 是否显示多窗口按钮                                  | false          | 非必填 |
| secondWindowsWidth   | number  | 第二窗口初始宽度                                    | 窗口宽度的 1/2 | 非必填 |
| secondtWindowsHeight | number  | 第二窗口初始高度                                    | 窗口高度的 1/2 | 非必填 |
| minResizeWidth       | number  | 第二窗口最小宽度                                    | 400            | 非必填 |
| minResizeHeight      | number  | 第二窗口最小高度                                    | 200            | 非必填 |
| mg                   | boolean | 是否开启外边距                                      | false          | 非必填 |
| mgL                  | boolean | 是否开启左侧外边距                                  | false          | 非必填 |
| mgR                  | boolean | 是否开启右侧外边距                                  | false          | 非必填 |
| mgT                  | boolean | 是否开启顶部外边距                                  | false          | 非必填 |
| mgB                  | boolean | 是否开启底部外边距                                  | false          | 非必填 |
| mgSize               | String  | 外边距尺寸，对应主题包的 s-1~s-12                   | s-4            | 非必填 |

## ContentColumn 横向布局（左右排列，包裹容器）

| 属性      | 类型    | 说明                              |
| --------- | ------- | --------------------------------- |
| className | String  | 扩展样式类名                      | contentcolumn | 非必填 |
| style     | Object  | 自定样式布局                      |  | 非必填 |
| mg        | boolean | 是否开启外边距                    | false | 非必填 |
| mgL       | boolean | 是否开启左侧外边距                | false | 非必填 |
| mgR       | boolean | 是否开启右侧外边距                | false | 非必填 |
| mgT       | boolean | 是否开启顶部外边距                | false | 非必填 |
| mgB       | boolean | 是否开启底部外边距                | false | 非必填 |
| mgSize    | String  | 外边距尺寸，对应主题包的 s-1~s-12 | s-4 | 非必填 |

## LeftSide 左侧边导航（默认宽度 200px）

| 属性      | 类型    | 说明                              |
| --------- | ------- | --------------------------------- |
| className | String  | 扩展样式类名                      | leftside | 非必填 |
| style     | Object  | 自定样式布局                      |  | 非必填 |
| flex      | number  | 横向占比 ，范围 1~24              |  | 非必填 |
| mg        | boolean | 是否开启外边距                    | false | 非必填 |
| mgL       | boolean | 是否开启左侧外边距                | false | 非必填 |
| mgR       | boolean | 是否开启右侧外边距                | false | 非必填 |
| mgT       | boolean | 是否开启顶部外边距                | false | 非必填 |
| mgB       | boolean | 是否开启底部外边距                | false | 非必填 |
| mgSize    | String  | 外边距尺寸，对应主题包的 s-1~s-12 | s-4 | 非必填 |

## LeftList 左侧列表（默认宽度 240 px）

| 属性         | 类型    | 说明                                                |
| ------------ | ------- | --------------------------------------------------- |
| className    | String  | 扩展样式类名                                        | leftlist | 非必填 |
| style        | Object  | 自定样式布局                                        |  | 非必填 |
| enableShrink | boolean | 是否开启列表收缩功能，默认不开启                    | false | 非必填 |
| enableDrag   | boolean | 是否开启拖拽功能，默认不开启                        | false | 非必填 |
| flex         | number  | 横向占比,在开启拖拽功能时，开启此功能无效,范围 1~24 |  | 非必填 |
| mg           | boolean | 是否开启外边距                                      | false | 非必填 |
| mgL          | boolean | 是否开启左侧外边距                                  | false | 非必填 |
| mgR          | boolean | 是否开启右侧外边距                                  | false | 非必填 |
| mgT          | boolean | 是否开启顶部外边距                                  | false | 非必填 |
| mgB          | boolean | 是否开启底部外边距                                  | false | 非必填 |
| mgSize       | String  | 外边距尺寸，对应主题包的 s-1~s-12                   | s-4 | 非必填 |