Eagle UI

# Grid 栅格

栅格系统将一行分为24个平均的网格。

# 网格

# 预览


# 示例

通过span设置一列所占的网格数

<e-row>
    <e-col span="24">100%</e-col>
</e-row>
<e-row>
    <e-col span="6">25%</e-col>
    <e-col span="6">25%</e-col>
    <e-col span="6" class="blue">25%</e-col>
    <e-col span="6">25%</e-col>
</e-row>
<e-row>
    <e-col span="8">33.33%</e-col>
    <e-col span="8">33.33%</e-col>
    <e-col span="8">33.33%</e-col>
</e-row>

<e-row>
    <e-col span="12">50%</e-col>
    <e-col span="12">50%</e-col>
</e-row>
<e-row>
    <e-col span="8">33.33%</e-col>
    <e-col span="16">66.66%</e-col>
</e-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 偏移量

# 预览


# 示例

通过offset设置网格的偏移量

<e-row>
    <e-col span="20" offset="4" class="blue">80%</e-col>
</e-row>
<e-row>
    <e-col span="6" class="blue">25%</e-col>
    <e-col span="6" offset="6" class="blue">25%</e-col>
    <e-col span="6">25%</e-col>
</e-row>
<e-row>
    <e-col span="8" class="blue">33.33%</e-col>
    <e-col span="8" offset="8" class="blue">33.33%</e-col>
</e-row>
1
2
3
4
5
6
7
8
9
10
11
12

# 自适应

# 预览


# 示例

提供了iPhone、ipad、narrow pc、pc、wide pc 五个尺寸

参数：{span: String | Number, offset: String | Number}

<e-row gutter="10">
    <e-col 
    :iphone="{span:22}" 
    :ipad="{span:16}" 
    :narrow-pc="{span:12}"
    :pc="{span:8}" 
    :wide-pc="{span:4}"></e-col>
    
    <e-col :iphone="{span:2}" :ipad="{span:8}" :narrow-pc="{span:12}":pc="{span:16}" :wide-pc="{span:20}" class="blue"></e-col>
</e-row>
1
2
3
4
5
6
7
8
9
10

TIP

设置了五个尺寸之后在设置的span将失效

# 裂缝

用于gutter设置列与列之间的间隙

参数：String | Number

<e-row gutter="10"></e-row>
1

设置网格之间的间隙为10像素

← Toast - 提示框 →