深色模式
Layout 页面布局
简单页面布局容器，提供水平左右结构或垂直上下结构页面布局。
基本用法
Side
Main
Side
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
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
纵向排列
Side
Main
Side
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
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
显示边框
Side
Main
Side
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
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
布局面板
侧边标题
侧边内容
自定义空描述
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
面板操作栏
侧边标题
侧边内容
自定义空描述
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
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
可关闭侧边
侧边标题
侧边内容
自定义空描述
点击查看代码
vue
<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 setup lang="ts">
</script>
<style scoped lang="scss">
.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Layout Props
LayoutPane Props
LayoutMain 与 LayoutSide 共享 props
LayoutSide Props
LayoutPane Slots
LayoutMain 与 LayoutSide 共享 slots