dk-plus

简体中文

English

简体中文

English

Appearance

目录

container 页面布局容器 ​

处理常见的一些网页布局，实现快速搭建

基本使用 ​

  • dk-container 最外层容器, 用于设置页面最大宽度,可以实现垂直,水平,嵌套布局
  • dk-header 顶部布局容器
  • dk-laside 侧边栏布局容器
  • dk-main 主要内容布局容器
  • dk-footer 底部布局容器

基本布局 ​

下面是由 dk plus 提供的几种常见的页面布局演示

示例1


示例2
main


示例3
main
footer


示例4
main


示例5
main


示例6
main


示例7
main
footer


示例8
main
footer
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布局方向Stringhorizontal / verticalhorizontal

header Attributes ​

参数说明类型可选值默认值
heightheader高度String/number-60px
paddingheader内间距String/number--

laside Attributes ​

参数说明类型可选值默认值
widthaside宽度String/number-20%
paddingaside内间距String/number--
heightheader高度String/number-300px

main Attributes ​

参数说明类型可选值默认值
heightheader高度String/number-180px
paddingheader内间距String/number--
参数说明类型可选值默认值
heightheader高度String/number-60px
paddingheader内间距String/number--

Slots(插槽) ​

name说明
default默认插槽

DkContainerPropsType ​

ts
type DkContainerPropsType = 'horizontal' | 'vertical'

Contributors ​