Ghuo Design

简体中文

English

简体中文

English

Appearance

Grid 栅格 ​

24 栅格系统，用于页面布局。

设计理念 ​

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

  • 通过 row 在水平方向建立一组 column（简写 col）
  • 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素
  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <g-col :span="8" /> 来创建
  • 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列

基础用法 ​

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

vue
<template>
  <g-row>
    <g-col :span="24">col</g-col>
  </g-row>
  <g-row>
    <g-col :span="12">col-12</g-col>
    <g-col :span="12">col-12</g-col>
  </g-row>
  <g-row>
    <g-col :span="8">col-8</g-col>
    <g-col :span="8">col-8</g-col>
    <g-col :span="8">col-8</g-col>
  </g-row>
  <g-row>
    <g-col :span="6">col-6</g-col>
    <g-col :span="6">col-6</g-col>
    <g-col :span="6">col-6</g-col>
    <g-col :span="6">col-6</g-col>
  </g-row>
</template>

区块间隔 ​

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

vue
<template>
  <g-row :gutter="16">
    <g-col :span="6">
      <div>col-6</div>
    </g-col>
    <g-col :span="6">
      <div>col-6</div>
    </g-col>
    <g-col :span="6">
      <div>col-6</div>
    </g-col>
    <g-col :span="6">
      <div>col-6</div>
    </g-col>
  </g-row>
</template>

左右偏移 ​

使用 offset 可以将列向右侧偏移。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。

vue
<template>
  <g-row>
    <g-col :span="8">col-8</g-col>
    <g-col :span="8" :offset="8">col-8</g-col>
  </g-row>
  <g-row>
    <g-col :span="6" :offset="6">col-6 col-offset-6</g-col>
    <g-col :span="6" :offset="6">col-6 col-offset-6</g-col>
  </g-row>
  <g-row>
    <g-col :span="12" :offset="6">col-12 col-offset-6</g-col>
  </g-row>
</template>

栅格排序 ​

通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。

vue
<template>
  <g-row>
    <g-col :span="18" :push="6">col-18 col-push-6</g-col>
    <g-col :span="6" :pull="18">col-6 col-pull-18</g-col>
  </g-row>
</template>

排版 ​

布局基础。

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

vue
<template>
  <div>
    <p>sub-element align left</p>
    <g-row type="flex" justify="start">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>

    <p>sub-element align center</p>
    <g-row type="flex" justify="center">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>

    <p>sub-element align right</p>
    <g-row type="flex" justify="end">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>

    <p>sub-element monospaced arrangement</p>
    <g-row type="flex" justify="space-between">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>

    <p>sub-element align full</p>
    <g-row type="flex" justify="space-around">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>

    <p>sub-element align evenly</p>
    <g-row type="flex" justify="space-evenly">
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
      <g-col :span="4">col-4</g-col>
    </g-row>
  </div>
</template>

对齐 ​

子元素垂直对齐。

vue
<template>
  <div>
    <p>Align Top</p>
    <g-row type="flex" justify="center" align="top">
      <g-col :span="4"><p style="height: 100px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 50px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 120px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 80px">col-4</p></g-col>
    </g-row>

    <p>Align Middle</p>
    <g-row type="flex" justify="space-around" align="middle">
      <g-col :span="4"><p style="height: 100px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 50px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 120px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 80px">col-4</p></g-col>
    </g-row>

    <p>Align Bottom</p>
    <g-row type="flex" justify="space-between" align="bottom">
      <g-col :span="4"><p style="height: 100px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 50px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 120px">col-4</p></g-col>
      <g-col :span="4"><p style="height: 80px">col-4</p></g-col>
    </g-row>
  </div>
</template>

响应式布局 ​

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

vue
<template>
  <g-row>
    <g-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</g-col>
    <g-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</g-col>
    <g-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</g-col>
  </g-row>
</template>

API ​

Row ​

参数说明类型默认值
align垂直对齐方式top | middle | bottom | stretchtop
gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]number | object | array0
justify水平排列方式start | end | center | space-around | space-between | space-evenlystart
type布局模式，可选 flex，现代浏览器下有效string-
wrap是否自动换行booleantrue

Col ​

参数说明类型默认值
flexflex 布局属性string | number-
offset栅格左侧的间隔格数，间隔内不可以有栅格number0
order栅格顺序number0
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-

Released under the MIT License.

Copyright © 2024 Ghuo Design