dk-plus

简体中文

English

简体中文

English

Appearance

目录

Layout 布局 ​

迅速简便的创建布局的容器。

基础使用 ​

通过 row 和 col 组件，就可以创建出基础的栅格布局。

html
<template>
  <dk-row>
    <dk-col>
      <div class="dark"></div>
    </dk-col>
  </dk-row>
  <dk-row>
    <dk-col :span="12"><div class="dark"></div></dk-col>
    <dk-col :span="12"><div class="light"></div></dk-col>
  </dk-row>
  <dk-row>
    <dk-col :span="8"><div class="dark"></div></dk-col>
    <dk-col :span="8"><div class="light"></div></dk-col>
    <dk-col :span="8"><div class="dark"></div></dk-col>
  </dk-row>
  <dk-row>
    <dk-col :span="6"><div class="dark"></div></dk-col>
    <dk-col :span="6"><div class="light"></div></dk-col>
    <dk-col :span="6"><div class="dark"></div></dk-col>
    <dk-col :span="6"><div class="light"></div></dk-col>
  </dk-row>
  <dk-row>
    <dk-col><div class="dark"></div></dk-col>
    <dk-col><div class="light"></div></dk-col>
    <dk-col><div class="dark"></div></dk-col>
    <dk-col><div class="light"></div></dk-col>
    <dk-col><div class="dark"></div></dk-col>
  </dk-row>
</template>
<style>
  .dark,
  .light {
    height: 100%;
    height: 32px;
    border-radius: 4px;
    opacity: 0.5;
  }

  .dark {
    background-color: #ccc;
  }

  .light {
    background-color: #eee;
  }
</style>
展开

栅格间隔 ​

通过 gutter 属性设置栅格间隔。

html
<template>
  <dk-row :gutter="30">
    <dk-col><div class="dark"></div></dk-col>
    <dk-col><div class="light"></div></dk-col>
    <dk-col><div class="dark"></div></dk-col>
    <dk-col><div class="light"></div></dk-col>
  </dk-row>
</template>
<style>
  .dark,
  .light {
    height: 100%;
    height: 32px;
    border-radius: 4px;
    opacity: 0.5;
  }

  .dark {
    background-color: #ccc;
  }

  .light {
    background-color: #eee;
  }
</style>
展开

混合布局 ​

设置不用的 span 值，来创建不同的布局。

html
<template>
  <dk-row :gutter="20">
    <dk-col :span="5"><div class="dark"></div></dk-col>
    <dk-col :span="10"><div class="light"></div></dk-col>
  </dk-row>
  <dk-row :gutter="20">
    <dk-col :span="5"><div class="dark"></div></dk-col>
    <dk-col :span="10"><div class="light"></div></dk-col>
    <dk-col :span="5"><div class="dark"></div></dk-col>
    <dk-col :span="10"><div class="light"></div></dk-col>
  </dk-row>
  <dk-row :gutter="20">
    <dk-col :span="5"><div class="dark"></div></dk-col>
    <dk-col :span="20"><div class="light"></div></dk-col>
    <dk-col :span="5"><div class="dark"></div></dk-col>
  </dk-row>
</template>
<style>
  .dark,
  .light {
    height: 100%;
    height: 32px;
    border-radius: 4px;
    opacity: 0.5;
  }

  .dark {
    background-color: #ccc;
  }

  .light {
    background-color: #eee;
  }
</style>
展开

列偏移 ​

通过 offset 属性设置列偏移。

html
<template>
  <dk-row>
    <dk-col :span="10" :offset="6"><div class="dark"></div></dk-col>
    <dk-col :offset="1"><div class="light"></div></dk-col>
    <dk-col><div class="dark"></div></dk-col>
    <dk-col><div class="light"></div></dk-col>
  </dk-row>
</template>
<style>
  .dark,
  .light {
    height: 100%;
    height: 32px;
    border-radius: 4px;
    opacity: 0.5;
  }

  .dark {
    background-color: #ccc;
  }

  .light {
    background-color: #eee;
  }
</style>
展开

属性 ​

参数说明类型可选值默认值
gutter栅格间隔number—0
justifyflex 布局下的水平排列方式stringstart end center space-around space-betweenstart
span栅格占据的列数number-—
offset栅格左侧的间隔格数number-—