# 网格

24格网格系统。

# 预览

# 使用方法

<template>
  <div>
    <xin-row class="xin-row">
      <xin-col span="24" class="xin-col">24</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="12" class="xin-col">12</xin-col>
      <xin-col span="12" class="xin-col">12</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="8" class="xin-col">8</xin-col>
      <xin-col span="8" class="xin-col">8</xin-col>
      <xin-col span="8" class="xin-col">8</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
      <xin-col span="3" class="xin-col">3</xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;margin: 2px 0;
    &:nth-child(odd){background: $background;}
    &:nth-child(even){background: darken($background, 10%);}
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 选项支持选项

# Row 选项

Row 选项	取值	类型	作用
gutter	限定数字和字符串	String or Number	设置col组件之间的间隔
align	left、center、right	String	设置排版方式

# gutter

设置gutter表示空隙/间隔，单位为'px'。

预览

代码实现

<template>
  <div>
    <xin-row class="xin-row" gutter="10">
      <xin-col span="12" class="xin-col"><div>gutter 10</div></xin-col>
      <xin-col span="12" class="xin-col"><div>gutter 10</div></xin-col>
    </xin-row>
    <xin-row class="xin-row" gutter="20">
      <xin-col span="12" class="xin-col"><div>gutter 20</div></xin-col>
      <xin-col span="12" class="xin-col"><div>gutter 20</div></xin-col>
    </xin-row>
    <xin-row class="xin-row" gutter="30">
      <xin-col span="12" class="xin-col"><div>gutter 30</div></xin-col>
      <xin-col span="12" class="xin-col"><div>gutter 30</div></xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
* { box-sizing: border-box; }
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;margin: 2px 0;
    > div {  background: #3eaf7c; }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# align

设置align表示row组件中子组件的排版方式。

预览

代码实现

<template>
  <div>
    <xin-row class="xin-row" align="left">
      <xin-col span="10" class="xin-col">align=left</xin-col>
      <xin-col span="10" class="xin-col">align=left</xin-col>
    </xin-row>
    <xin-row class="xin-row" align="center">
      <xin-col span="10" class="xin-col">align=center</xin-col>
      <xin-col span="10" class="xin-col">align=center</xin-col>
    </xin-row>
    <xin-row class="xin-row" align="right">
      <xin-col span="10" class="xin-col">align=right</xin-col>
      <xin-col span="10" class="xin-col">align=right</xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
* { box-sizing: border-box; }
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;margin: 2px 0;
    &:nth-child(odd){background: $background;}
    &:nth-child(even){background: darken($background, 10%);}
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# Col 选项

Col 选项	取值	类型	作用
span	0-24	String or Number	设置col组件占据的宽度
offset	0-24	String or Number	设置col组件向右偏移的距离
ipad、narrow-pc、pc、wide-pc	span和offset的值	Object	设置响应式

# span

设置span表示网格系统中col组件跨越的宽度，span和offset相加总数为24份。

预览

代码实现

<template>
  <div>
    <xin-row class="xin-row">
      <xin-col span="12" class="xin-col">12</xin-col>
      <xin-col span="12" class="xin-col">12</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="8" class="xin-col">8</xin-col>
      <xin-col span="8" class="xin-col">8</xin-col>
      <xin-col span="8" class="xin-col">8</xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
      <xin-col span="6" class="xin-col">6</xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
* { box-sizing: border-box; }
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;margin: 2px 0;
    &:nth-child(odd){background: $background;}
    &:nth-child(even){background: darken($background, 10%);}
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# offset

设置offset表示col组件向右偏移的距离，原理为margin-left设置，span和offset相加总数为24份。

预览

代码实现

<template>
  <div>
    <xin-row class="xin-row">
      <xin-col span="6" class="xin-col"><span>offset=0</span></xin-col>
      <xin-col span="4" offset="8" class="xin-col"><span>offset=8</span></xin-col>
      <xin-col span="4" offset="2" class="xin-col"><span>offset=2</span></xin-col>
    </xin-row>
    <xin-row class="xin-row">
      <xin-col span="8"  class="xin-col"><span>offset=0</span></xin-col>
      <xin-col span="6" offset="2" class="xin-col"><span>offset=2</span></xin-col>
      <xin-col span="4" offset="4" class="xin-col"><span>offset=4</span></xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
* { box-sizing: border-box; }
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;
    &:nth-child(odd){background: $background;}
    &:nth-child(even){background: darken($background, 10%);}
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 响应式

支持ipad、narrowPc、pc、widePc和默认手机端的响应式布局。设置多种模式时，需要span和offset相加总数为24。

预览

代码实现

<template>
  <div>
    <xin-row class="xin-row">
      <xin-col span="8" :ipad="{span:8}" :wide-pc="{span: 6,offset: 2}" :pc="{span: 4,offset: 4}" class="xin-col">8</xin-col>
      <xin-col span="8" :ipad="{span: 6,offset: 2}" :wide-pc="{span:8}" :pc="{span: 4,offset: 4}" class="xin-col">8</xin-col>
      <xin-col span="8" :ipad="{span: 4,offset: 4}" :wide-pc="{span: 6,offset: 2}" :pc="{span:8}" class="xin-col">8</xin-col>
    </xin-row>
  </div>
</template>

<style scoped lang="scss">
* { box-sizing: border-box; }
$background: #42b983;
$color: white;
.xin-row{
  color: $color;
  .xin-col{
    text-align: center;margin: 2px 0;
    &:nth-child(odd){background: $background;}
    &:nth-child(even){background: darken($background, 10%);}
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

← Button - 按钮 Input - 输入框 →