dk-pluscontainer 页面布局容器
处理常见的一些网页布局，实现快速搭建
基本使用
dk-container最外层容器, 用于设置页面最大宽度,可以实现垂直,水平,嵌套布局dk-header顶部布局容器dk-laside侧边栏布局容器dk-main主要内容布局容器dk-footer底部布局容器
基本布局
下面是由 dk plus 提供的几种常见的页面布局演示
示例1
示例2
示例3
示例4
示例5
示例6
示例7
示例8
html
<h6>示例1</h6>
<dk-container>
<dk-header> header </dk-header>
</dk-container>
<h6>示例2</h6>
<dk-container>
<dk-header> header </dk-header>
<dk-main> main </dk-main>
</dk-container>
<h6>示例3</h6>
<dk-container>
<dk-header> header </dk-header>
<dk-main> main </dk-main>
<dk-footer> footer </dk-footer>
</dk-container>
<h6>示例4</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
</dk-container>
<h6>示例5</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
</dk-container>
<h6>示例6</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
<dk-laside> Laside </dk-laside>
</dk-container>
<h6>示例7</h6>
<dk-container>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
<dk-laside> Laside </dk-laside>
</dk-container>
<dk-footer> footer </dk-footer>
</dk-container>
<h6>示例8</h6>
<dk-container>
<dk-header > header </dk-header>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
<dk-laside> Laside </dk-laside>
</dk-container>
<dk-footer> footer </dk-footer>
</dk-container>
<style scoped>
h6{
margin-bottom: 10px;
}
.dk-header {
background-color: #b35757;
color: #333;
text-align: center;
line-height: 50px;
}
.dk-main {
background-color: #3178c6;
color: #fff;
text-align: center;
line-height: 150px;
}
.dk-laside {
background-color: #65adf0;
color: #fff;
text-align: center;
line-height: 150px;
}
.dk-footer {
background-color: #07996d;
color: #333;
text-align: center;
line-height: 50px;
}
</style>展开
container Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
direction | 布局方向 | String | horizontal / vertical | horizontal |
header Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
height | header高度 | String/number | - | 60px |
padding | header内间距 | String/number | - | - |
laside Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
width | aside宽度 | String/number | - | 20% |
padding | aside内间距 | String/number | - | - |
height | header高度 | String/number | - | 300px |
main Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
height | header高度 | String/number | - | 180px |
padding | header内间距 | String/number | - | - |
footer Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
height | header高度 | String/number | - | 60px |
padding | header内间距 | String/number | - | - |
Slots(插槽)
| name | 说明 |
|---|---|
default | 默认插槽 |
DkContainerPropsType
ts
type DkContainerPropsType = 'horizontal' | 'vertical'Contributors
