# seLayoutContainer 

## 导入使用
```code[javascript]
import seLayoutContainer from "ss-universal-client-web/comp/layout/su-layout-container";
```

### 基本用法

```text
    1. 默认大小为 width:100vw;height:100vh;
```

:::demo 可以使用固定大小的区域布局。
```html
<template>
    <el-tabs type="border-card">
        <el-tab-pane :label="v" v-for="(v,k) in modes" :key="k">
            <su-layout-container :mode="k" :size="500">
                <div slot="aside" style="width: 100%;height:800px;background-color: #D3DCE6">aside</div>
                <div slot="header" style="width: 100%;height:100%;background-color: #B3C0D1">header</div>
                <div slot="main" style="width: 100%;height:700px;background-color: #E9EEF3">main</div>
                <div slot="footer" style="width: 100%;height:100%;background-color: #B3C0D1">footer</div>
            </su-layout-container>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
// import seLayoutContainer from "ss-universal-client-web/comp/layout/su-layout-container";
export default {
    components:{
        seLayoutContainer
    },
    data() {
        return {
            modes:{
                "lr":"左右布局",
                "ud":"上下布局",
                "ucd":"上中下布局",
            }
        }
    }
};
</script>

```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| size | 布局大小(0代表window) | number | 0/number | 0 |
| mode | 布局类型 | string | lr/ud/ucd | lr |
| aside-collapse | 是否窄菜单 | boolean | — | false |

### Slot

| Name | Description |
|------|--------|
| — | 描述 |
| aside | 菜单 |
| header | 头部 |
| main | 内容区 |
| footer | 底部 |