dk-plusLayout
Create a container for layout quickly and easily.
Basic usage
By using the row and col components, a basic grid layout can be created.
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>展开
Grid spacing
Set the grid interval through the gutter attribute.
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>展开
Mixed layout
Set unused span values to create different layouts.
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>展开
Column offset
Set the column offset through the offset attribute.
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>展开
attribute
| parameter | explain | type | Optional values | Default value |
|---|---|---|---|---|
gutter | Grid spacing | number | — | 0 |
justify | Horizontal arrangement under flex layout | string | start end center space-around space-between | start |
span | Number of columns occupied by the grid | number | - | — |
offset | Number of spacing cells on the left side of the grid | number | - | — |
