# Layout 页面布局
简单页面布局容器，提供水平左右结构或垂直上下结构页面布局。
# 基本用法
点击查看代码
<template>
<s-layout style="height: 90px;">
<s-layout-side style="background: #ebeef5;">
<div class="custom-layout-pane">Side</div>
</s-layout-side>
<s-layout-main style="background: #f2f6fc;">
<div class="custom-layout-pane">Main</div>
</s-layout-main>
<s-layout-side style="background: #ebeef5;">
<div class="custom-layout-pane">Side</div>
</s-layout-side>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 纵向排列
点击查看代码
<template>
<s-layout style="height: 150px;" vertical>
<s-layout-side style="background: #ebeef5;">
<div class="custom-layout-pane">Side</div>
</s-layout-side>
<s-layout-main style="background: #f2f6fc;">
<div class="custom-layout-pane">Main</div>
</s-layout-main>
<s-layout-side style="background: #ebeef5;">
<div class="custom-layout-pane">Side</div>
</s-layout-side>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 显示边框
点击查看代码
<template>
<s-layout style="height: 90px;" border>
<s-layout-side>
<div class="custom-layout-pane">Side</div>
</s-layout-side>
<s-layout-main>
<div class="custom-layout-pane">Main</div>
</s-layout-main>
<s-layout-side>
<div class="custom-layout-pane">Side</div>
</s-layout-side>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 布局面板
点击查看代码
<template>
<s-layout style="height: 150px;" border>
<s-layout-side title="侧边标题">
<div class="custom-layout-pane">侧边内容</div>
</s-layout-side>
<s-layout-main empty emptyText="自定义空描述">
<div class="custom-layout-pane">主要内容</div>
</s-layout-main>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 面板操作栏
点击查看代码
<template>
<s-layout style="height: 150px;" border>
<s-layout-side title="侧边标题" size="180px">
<template #toolbar>
<el-button type="primary" size="small">按钮</el-button>
</template>
<div class="custom-layout-pane">侧边内容</div>
</s-layout-side>
<s-layout-main empty emptyText="自定义空描述">
<div class="custom-layout-pane">主要内容</div>
</s-layout-main>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 可关闭侧边
点击查看代码
<template>
<s-layout style="height: 150px;" border>
<s-layout-side title="侧边标题" size="180px" collapsible>
<div class="custom-layout-pane">侧边内容</div>
</s-layout-side>
<s-layout-main empty emptyText="自定义空描述">
<div class="custom-layout-pane">主要内容</div>
</s-layout-main>
</s-layout>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.custom-layout-pane {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Layout Props
# LayoutPane Props
# LayoutSide Props
# LayoutPane Slots
# LayoutSide Emits
← Space 内容间距 Frame 面板分割 →