Fes Design

Grid 栅格 ​

布局的栅格化系统，我们是基于行（grid）和列（gridItem）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

  • 通过grid在水平方向建立一组gridItem
  • 你的内容应当放置于gridItem内，并且，只有gridItem可以作为grid的直接元素
  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `` 来创建
  • 如果一个grid中的gridItem总和超过 24，那么多余的gridItem会作为一个整体另起一行排列

组件注册 ​

js
import { FGrid, FGridItem } from '@fesjs/fes-design';

app.use(FGrid);
app.use(FGridItem);

代码演示 ​

基础用法 ​

从堆叠到水平排列。

使用单一的一组 Grid 和 GridItem 栅格组件，就可以创建一个基本的栅格系统。

play
<template>
    <FGrid>
        <FGridItem v-for="item in 2" :key="item" :span="12">
            <div class="col-demo">col-12</div>
        </FGridItem>
    </FGrid>
    <FGrid>
        <FGridItem v-for="item in 3" :key="item" :span="8">
            <div class="col-demo">col-8</div>
        </FGridItem>
    </FGrid>
    <FGrid>
        <FGridItem v-for="item in 4" :key="item" :span="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

分栏间隔 ​

分栏之间存在间隔。

水平间隔 ​

play
<template>
    <FGrid :gutter="20">
        <FGridItem v-for="item in 4" :key="item" :span="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

水平垂直间隔 ​

当列超出一行时，默认不换行。如果设置wrap为true，则会换行显示。可以通过设置gutter控制换行之后的间隔。

play
<template>
    <FGrid :gutter="[20, 20]" wrap>
        <FGridItem v-for="item in 8" :key="item" :span="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

分栏偏移 ​

支持偏移指定的栏数。

play
<template>
    <FGrid :gutter="20">
        <FGridItem :span="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
        <FGridItem :span="6" :offset="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
    </FGrid>
    <FGrid :gutter="20">
        <FGridItem :span="6" :offset="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
        <FGridItem :span="6" :offset="6">
            <div class="col-demo">col-6</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

对齐方式 ​

默认使用 flex 布局来对分栏进行灵活的对齐。

水平排列 ​

在水平排列方向上的对齐方式跟flex的justify-content属性一致。

play
<template>
    <FGrid v-for="(j, index) in justify" :key="index" :justify="j">
        <FGridItem v-for="item in 3" :key="item" :span="6">
            <div class="col-demo">{{ j }}</div>
        </FGridItem>
    </FGrid>
</template>

<script>
import {} from 'vue';

export default {
    setup() {
        const justify = [
            'flex-start',
            'flex-end',
            'center',
            'space-around',
            'space-between',
        ];
        const align = [
            'flex-start',
            'flex-end',
            'center',
            'baseline',
            'stretch',
        ];
        return {
            justify,
            align,
        };
    },
};
</script>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

垂直排列 ​

在垂直排列方向上的对齐方式跟flex的align-items属性一致。

play
<template>
    <FGrid v-for="(a, index) in align" :key="index" :align="a">
        <FGridItem v-for="item in 4" :key="item" :span="6">
            <div
                class="col-demo"
                :style="{
                    'padding': 0,
                    'height': `${item * 40}px`,
                    'line-height': `${item * 40}px`,
                }"
            >
                {{ a }}
            </div>
        </FGridItem>
    </FGrid>
</template>

<script>
import {} from 'vue';

export default {
    setup() {
        const justify = [
            'flex-start',
            'flex-end',
            'center',
            'space-around',
            'space-between',
        ];
        const align = [
            'flex-start',
            'flex-end',
            'center',
            'baseline',
            'stretch',
        ];
        return {
            justify,
            align,
        };
    },
};
</script>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

排序 ​

通过 order 来改变元素的排序。

play
<template>
    <FGrid>
        <FGridItem v-for="item in 4" :key="item" :span="6" :order="4 - item">
            <div class="col-demo">index: {{ item }} order: {{ 4 - item }}</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

Flex 填充 ​

GridItem 提供 flex 属性以支持填充。

play
<template>
    <FGrid>
        <FGridItem :flex="2">
            <div class="col-demo">2 / 5</div>
        </FGridItem>
        <FGridItem :flex="3">
            <div class="col-demo">3 / 5</div>
        </FGridItem>
    </FGrid>
    <FGrid>
        <FGridItem flex="100px">
            <div class="col-demo">100px</div>
        </FGridItem>
        <FGridItem flex="auto">
            <div class="col-demo">auto</div>
        </FGridItem>
    </FGrid>
    <FGrid>
        <FGridItem flex="1 1 200px">
            <div class="col-demo">1 1 200px</div>
        </FGridItem>
        <FGridItem flex="0 1 300px">
            <div class="col-demo">0 1 300px</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

响应式布局 ​

参照 Bootstrap 的 响应式设计，预设七个响应尺寸：xs、sm、md、lg、xl、xxl、xxxl。

play
<template>
    <FGrid>
        <FGridItem :xs="0" :sm="4" :md="6" :lg="8" :xl="10">
            <div class="col-demo">col</div>
        </FGridItem>
        <FGridItem :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
            <div class="col-demo">col</div>
        </FGridItem>
        <FGridItem :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
            <div class="col-demo">col</div>
        </FGridItem>
    </FGrid>
</template>

<style scoped>
.fes-grid-item .col-demo {
    margin: 4px 0;
    padding: 16px 0;
    color: #ffffff;
    text-align: center;
}

.fes-grid-item:nth-child(2n + 1) .col-demo {
    background: rgba(0, 146, 255, 0.75);
}

.fes-grid-item:nth-child(2n) .col-demo {
    background: #0092ff;
}
</style>

Grid Props ​

属性说明类型默认值
alignflex 布局下的垂直对齐方式：'flex-start'、 'center'、 'flex-end'、 'baseline'、 'stretch'stringflex-start
gutter栅格间隔，可以写成像素值，表示水平间隔。或者使用数组同时设置[水平间距,垂直间距]。number/array0
justifyflex 布局下的水平排列方式：flex-start、flex-end、center、space-around、space-betweenstringflex-start
wrap是否自动换行booleanfalse

GridItem Props ​

属性说明类型默认值
flexflex 布局填充string/number-
offset栅格左侧的间隔格数number0
order栅格的顺序，从小到大排列number-
pull栅格向左移动格数number0
push栅格向右移动格数number0
span栅格占位格数，为 0 时相当于 display: nonenumber-
xs<576px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
sm≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
md≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
lg≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
xl≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
xxl≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-
xxxl≥2000px 响应式栅格，可为栅格数或一个包含其他属性的对象number/object-