dk-pluscontainer 页面布局容器
Handle some common web layout, to achieve fast construction
Basic use
dk-containerThe outermost container, used to set the maximum width of the page, can achieve vertical, horizontal, nested layoutdk-headerTop layout containerdk-lasideSidebar layout containerdk-mainMain contents Layout containerdk-footerBottom layout container
Basic layout
Here are some common page layout demos provided by dk plus
Give an example 1
Give an example 2
Give an example 3
Give an example 4
Give an example 5
Give an example 6
Give an example 7
Give an example 8
html
<h6>Give an example 1</h6>
<dk-container>
<dk-header> header </dk-header>
</dk-container>
<h6>Give an example 2</h6>
<dk-container>
<dk-header> header </dk-header>
<dk-main> main </dk-main>
</dk-container>
<h6>Give an example 3</h6>
<dk-container>
<dk-header> header </dk-header>
<dk-main> main </dk-main>
<dk-footer> footer </dk-footer>
</dk-container>
<h6>Give an example 4</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
</dk-container>
<h6>Give an example 5</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
</dk-container>
<h6>Give an example 6</h6>
<dk-container>
<dk-laside> Laside </dk-laside>
<dk-main> main </dk-main>
<dk-laside> Laside </dk-laside>
</dk-container>
<h6>Give an example 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>Give an example 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
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
direction | Layout direction | String | horizontal / vertical | horizontal |
header Attributes
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
height | header Altitude | String/number | - | 60px |
padding | header Inner distance | String/number | - | - |
laside Attributes
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
width | aside breadth | String/number | - | 20% |
padding | aside Inner distance | String/number | - | - |
height | header Altitude | String/number | - | 300px |
main Attributes
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
height | header Altitude | String/number | - | 180px |
padding | header Inner distance | String/number | - | - |
footer Attributes
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
height | header Altitude | String/number | - | 60px |
padding | header Inner distance | String/number | - | - |
Slots
| name | Instructions |
|---|---|
default | Default slot |
DkContainerPropsType
ts
type DkContainerPropsType = 'horizontal' | 'vertical'Contributors
