栅格 - Semi Design Next

概述

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

弹性布局

我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

代码演示

如何引入

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

基础使用

从堆叠到水平排列。

使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有 Col 必须放在 Row 内。

span、offset、gutter、xs 等数字与对象属性要用 : 绑定，例如 :span="12"，写成字符串不会被转换为数字。

col-24

col-12

col-8

col-6

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row>
            <Col :span="24">
                <div class="col-content">col-24</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :span="12">
                <div class="col-content">col-12</div>
            </Col>
            <Col :span="12">
                <div class="col-content">col-12</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :span="8">
                <div class="col-content">col-8</div>
            </Col>
            <Col :span="8">
                <div class="col-content">col-8</div>
            </Col>
            <Col :span="8">
                <div class="col-content">col-8</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :span="6">
                <div class="col-content">col-6</div>
            </Col>
            <Col :span="6">
                <div class="col-content">col-6</div>
            </Col>
            <Col :span="6">
                <div class="col-content">col-6</div>
            </Col>
            <Col :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
    </div>
</template>

Gutter 间隔

栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)

垂直间隔可以使用数组形式，数组第一项为横向间隔，第二项为垂直间隔。

如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }

深色为内容物区域，浅色为间隔

horizontal

col-6

vertical

col-6

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid grid-gutter">
        <p>horizontal</p>
        <hr />
        <Row :gutter="16">
            <Col v-for="i in 8" :key="i" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
        <p>vertical</p>
        <hr />
        <Row :gutter="[16, 24]">
            <Col v-for="i in 8" :key="i" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
    </div>
</template>

Offset 偏移

col-8

col-6

col-12

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row>
            <Col :span="8">
                <div class="col-content">col-8</div>
            </Col>
            <Col :offset="8" :span="8">
                <div class="col-content">col-8</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :offset="6" :span="6">
                <div class="col-content">col-6</div>
            </Col>
            <Col :offset="6" :span="6">
                <div class="col-content">col-6</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :offset="6" :span="12">
                <div class="col-content">col-12</div>
            </Col>
        </Row>
    </div>
</template>

Flex 布局

给 Row 设置 type="flex" 定义 Flex 布局，justify 取不同的值 start、center、end、space-between、space-around，分别定义子元素在父节点里面的排版方式。

sub-element align left

col-4

sub-element align center

col-4

sub-element align right

col-4

sub-element monospaced arrangement

col-4

sub-element align full

col-4

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';

    const rows = [
        { title: 'sub-element align left', justify: 'start' },
        { title: 'sub-element align center', justify: 'center' },
        { title: 'sub-element align right', justify: 'end' },
        { title: 'sub-element monospaced arrangement', justify: 'space-between' },
        { title: 'sub-element align full', justify: 'space-around' },
    ] as const;
</script>

<template>
    <div class="grid">
        <template v-for="row in rows" :key="row.title">
            <p>{{ row.title }}</p>
            <Row :justify="row.justify" type="flex">
                <Col v-for="i in 4" :key="i" :span="4">
                    <div class="col-content">col-4</div>
                </Col>
            </Row>
        </template>
    </div>
</template>

Flex 子元素垂直对齐

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';

    const rows = [
        { title: 'Align Top', justify: 'center', align: 'top' },
        { title: 'Align Center', justify: 'space-around', align: 'middle' },
        { title: 'Align Bottom', justify: 'space-between', align: 'bottom' },
    ] as const;
</script>

<template>
    <div class="grid grid-flex">
        <template v-for="row in rows" :key="row.title">
            <p>{{ row.title }}</p>
            <Row :align="row.align" :justify="row.justify" type="flex">
                <Col v-for="i in 4" :key="i" :span="4">
                    <div class="col-content">col-4</div>
                </Col>
            </Row>
        </template>
    </div>
</template>

Flex 元素排序

通过 Flex 布局的 Order 来改变元素的排序。

col-4

col-3

col-2

col-1

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row type="flex">
            <Col :order="4" :span="6">
                <div class="col-content">col-4</div>
            </Col>
            <Col :order="3" :span="6">
                <div class="col-content">col-3</div>
            </Col>
            <Col :order="2" :span="6">
                <div class="col-content">col-2</div>
            </Col>
            <Col :order="1" :span="6">
                <div class="col-content">col-1</div>
            </Col>
        </Row>
    </div>
</template>

响应式

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

xs 是不带媒体查询的基础层，在所有屏幕宽度都生效；sm 及以上按视口宽度逐级覆盖更小的断点。

对象写法中 order、offset、push、pull 设为 0 会重置更小断点设置的值，例如 md 设为 { offset: 0 }。

Col

代码

<script setup lang="ts">
    import { Col, Row } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="grid">
        <Row :gutter="{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }">
            <Col :lg="8" :md="6" :sm="4" :xl="10" :xs="2">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="8" :md="12" :sm="16" :xl="4" :xs="20">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="8" :md="6" :sm="4" :xl="10" :xs="2">
                <div class="col-content">Col</div>
            </Col>
        </Row>
        <br />
        <Row>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 5, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 11, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
            <Col :lg="{ span: 6, offset: 2 }" :xs="{ span: 5, offset: 1 }">
                <div class="col-content">Col</div>
            </Col>
        </Row>
    </div>
</template>

API 参考

Row

Props

属性	说明	类型	默认值
type	布局模式，可选 flex。	`"flex"`	`semiGlobalDefault("Row", "type")`
align	flex 布局下的垂直对齐方式，可选 top、middle、bottom。	`"top" \| "bottom" \| "middle"`	`semiGlobalDefault("Row", "align")`
justify	flex 布局下的水平排列方式，可选 start、end、center、space-around、space-between。	`"start" \| "end" \| "center" \| "space-around" \| "space-between"`	`semiGlobalDefault("Row", "justify")`
gutter	栅格间隔，可以是像素值、响应式对象 `{ xs, sm, md, lg, xl, xxl }`，或 `[水平, 垂直]` 数组。	`Gutter \| [Gutter, Gutter]`	`semiDefault("Row", "gutter", 0)`
prefixCls	CSS 类名前缀。	`string`	`semiDefault("Row", "prefixCls", cssClasses.PREFIX)`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	行内的 Col。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 落在 Row 的根元素上。

Col

Props

属性	说明	类型	默认值
span	栅格占位格数，为 0 时相当于 display: none。	`number`	`semiGlobalDefault("Col", "span")`
order	栅格顺序，flex 布局模式下有效。	`number`	`semiGlobalDefault("Col", "order")`
offset	栅格起始侧（从左到右排版时为左侧）的间隔格数，间隔内不可以有栅格。	`number`	`semiGlobalDefault("Col", "offset")`
push	栅格向末尾侧（从左到右排版时为右侧）移动的格数。	`number`	`semiGlobalDefault("Col", "push")`
pull	栅格向起始侧（从左到右排版时为左侧）移动的格数。	`number`	`semiGlobalDefault("Col", "pull")`
prefixCls	CSS 类名前缀。	`string`	`semiDefault("Col", "prefixCls", cssClasses.PREFIX)`
xs	基础层响应式栅格，所有屏幕宽度都生效，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "xs")`
sm	屏幕宽度 ≥576px 时生效的响应式栅格，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "sm")`
md	屏幕宽度 ≥768px 时生效的响应式栅格，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "md")`
lg	屏幕宽度 ≥992px 时生效的响应式栅格，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "lg")`
xl	屏幕宽度 ≥1200px 时生效的响应式栅格，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "xl")`
xxl	屏幕宽度 ≥1600px 时生效的响应式栅格，可为栅格数或对象配置。	`number \| ColSize`	`semiGlobalDefault("Col", "xxl")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	栅格内的内容。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 落在 Col 的根元素上，自定义 class 排在组件类名之后。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$width-grid_screen-sm	576px	小尺寸设备 - 平板
$width-grid_screen-sm-min	$width-grid_screen-sm
$width-grid_screen-md	768px	中尺寸设备 - 水平平板
$width-grid_screen-md-min	$width-grid_screen-md
$width-grid_screen-lg	992px	大尺寸设备 - 小尺寸桌面端
$width-grid_screen-lg-min	$width-grid_screen-lg
$width-grid_screen-xl	1200px	超大尺寸设备 - 桌面端
$width-grid_screen-xl-min	$width-grid_screen-xl
$width-grid_screen-xxl	1600px	超大尺寸设备 - 桌面端 HD
$width-grid_screen-xxl-min	$width-grid_screen-xxl
$width-grid_columns	24	栅格宽度
$width-grid_gutter	0	槽宽度