栅栏 | 嘟嘟云A sass ui框架

# 栅栏

# 基础用法。

<template>
  <db-row class="grid__block">
    <db-col ></db-col>
    <db-col ></db-col>
  </db-row>
</template>
<style>
.col{
  /* background: #F7DEDE;
  min-height: 40px; */
}
</style>

Copy

# 设置背景

<template>
  <db-row class="grid__block">
    <db-col bg-color="#ff7e00"></db-col>
    <db-col ></db-col>
  </db-row>
</template>
<style>
.col{
  /* background: #F7DEDE;
  min-height: 40px; */
}
</style>

Copy

# 横向排列

子元素根据不同的值 start , center , end , space-between , space-around ，分别定义其在父节点里面的排版方式。

居中排列

居前

居后

两边对齐

两边均分对齐

<template>
  <div>
    居中排列 
    <db-row justify="center" class="grid__block">
      <db-col>
      </db-col>
      <db-col >
      </db-col>
    </db-row>
    居前
    <db-row justify="start" class="grid__block">
      <db-col>
      </db-col>
      <db-col >
      </db-col>
    </db-row>
    居后
    <db-row justify="end" class="grid__block">
      <db-col>
      </db-col>
      <db-col >
      </db-col>
    </db-row>
    两边对齐 
    <db-row justify="space-between" class="grid__block2">
      <db-col>
      </db-col>
      <db-col >
      </db-col>
      <db-col >
      </db-col>
    </db-row>
    两边均分对齐
    <db-row justify="space-around" class="grid__block2">
      <db-col>
      </db-col>
      <db-col >
      </db-col>
      <db-col >
      </db-col>
    </db-row>
  </div>
</template>

Copy

# 间距

根据 padding 设定子集内边距。默认设置 1 根据 margin 设定子集外边距。默认设置 1 不管内边距还是外边距都是以只识别双数。单数会进行四舍五入取双,都是以 8 为基础单位。

<template>
  <div>
    <db-row :padding="1" :margin="2" class="grid__block2">
      <db-col></db-col>
      <db-col></db-col>
      <db-col></db-col>
    </db-row>
  </div>
</template>

Copy

# 适配

根据 flexGrow 设定子集边占比

如果说设定一个固定宽度那么其他元素将会占满

<template>
  <div>
    <db-row class="grid__block2">
      <db-col flex-grow="1">
      </db-col >
      <db-col flex-grow="1">
      </db-col>
      <db-col flex-grow="1">
      </db-col>
      <db-col flex-grow="1">
      </db-col>
    </db-row>
    <db-row class="grid__block2">
      <db-col flex-grow="1">
      </db-col >
      <db-col flex-grow="3">
      </db-col>
    </db-row>
    <db-row class="grid__block2">
      <db-col flex-grow="2">
      </db-col >
      <db-col flex-grow="2">
      </db-col>
    </db-row>
    <db-row class="grid__block2">
      <db-col flex-grow="3">
      </db-col >
      <db-col flex-grow="1">
      </db-col>
    </db-row>
    如果说设定一个固定宽度那么其他元素将会占满
    <db-row class="grid__block2">
      <db-col width="100px">
      </db-col >
      <db-col flex-grow="1">
      </db-col>
    </db-row>
  </div>
</template>

Copy

# 排列方向

更具 direction设定排列方向，可选值row | row-reverse | column | column-reverse;

column

column-reverse

row

row-reverse

<template>
  <div>
    <div class="grid__title">column</div>
    <db-row direction="column" class="grid__block2">
      <db-col>1</db-col>
      <db-col>2</db-col>
      <db-col>3</db-col>
    </db-row>
    <div class="grid__title">column-reverse</div>
    <db-row direction="column-reverse" class="grid__block2">
      <db-col>1</db-col>
      <db-col>2</db-col>
      <db-col>3</db-col>
    </db-row>
    <div class="grid__title">row</div>
    <db-row direction="row" class="grid__block2">
      <db-col>1</db-col>
      <db-col>2</db-col>
      <db-col>3</db-col>
    </db-row>
    <div class="grid__title">row-reverse</div>
    <db-row direction="row-reverse" class="grid__block2">
      <db-col>1</db-col>
      <db-col>2</db-col>
      <db-col>3</db-col>
    </db-row>
  </div>
</template>

Copy

# 竖向对齐

更具 align-items设定排列方向，可选值start | end | center | baseline | stretch;

start

end

center

baseline

baseline1

baseline3

baseline2

stretch

stretch1

stretch2

stretch3

<template>
  <div>
    <div class="grid__title">start</div>
    <db-row align-items="start" class="grid__block3" height="100px">
      <db-col></db-col>
      <db-col></db-col>
      <db-col></db-col>
    </db-row>
    <div class="grid__title">end</div>
    <db-row align-items="end" class="grid__block3" height="100px">
      <db-col></db-col>
      <db-col></db-col>
      <db-col></db-col>
    </db-row>
    <div class="grid__title">center</div>
    <db-row align-items="center" class="grid__block3" height="100px">
      <db-col></db-col>
      <db-col  height="30px"></db-col>
      <db-col></db-col>
    </db-row>
    <div class="grid__title">baseline</div>
    <db-row align-items="baseline" class="grid__block3" height="100px">
      <db-col height="50px">baseline1</db-col>
      <db-col height="30px">baseline3</db-col>
      <db-col>baseline2</db-col>
    </db-row>
    <div class="grid__title">stretch</div>
    <db-row align-items="stretch" class="grid__block3" height="auto">
      <db-col >stretch1</db-col>
      <db-col>stretch2</db-col>
      <db-col>stretch3</db-col>
    </db-row>
  </div>
</template>

Copy

# 可指定方向的边距

根据 padding margin 指定为数组类型可以定义四边边距

<template>
  <div>
    <db-row :padding="[1, 2]" :margin="[1, 2]" class="grid__block2">
      <db-col></db-col>
      <db-col></db-col>
      <db-col></db-col>
    </db-row>
  </div>
</template>

Copy

# API

图片当前只支持线上src，目前图片会根据用户的像素进行切换图片地址。目前添加@2x的图片，上传oss资源时候注意同一文件地址需要上传两份文件(默认大小图片和2x图片)

# row

属性	说明	类型	默认值	可选值	版本
padding	内边距	`Number` `Array`			1.0.0
margin	外边距	`Number` `Array`			1.0.0
type	类型	`String`	`flex`		1.0.0
justify	对齐模式	`String`		`start` `center` `end` `space-between` `space-around`	1.0.0
baseUint	基础单位	`Number`	8		1.0.0
direction	对齐方向	`String`		`row` `row-reverse` `column` `column-reverse`	1.0.0
alignItems	竖向对齐	`Number`		`start` `end` `center` `baseline` `stretch`	1.0.0
width	宽度	`String`			1.0.0
height	高度	`String`			1.0.0

# col

属性	说明	类型	版本
width	宽度	String	1.0.0
height	高度	String	1.0.0
flexGrow	占比	Number	1.0.0

← 快速上手布局容器 container →