栅格 Grid

栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。

基本用法

展示了最基本的 24 等分应用。

代码事例

vue

<template>
  <div class="grid-demo-background">
    <fk-space direction="vertical" :size="16" style="display: block;">
      <fk-row class="grid-demo">
        <fk-col :span="24">
          <div>24 - 100%</div>
        </fk-col>
      </fk-row>
      <fk-row class="grid-demo">
        <fk-col :span="12">
          <div>12 - 50%</div>
        </fk-col>
        <fk-col :span="12">
          <div>12 - 50%</div>
        </fk-col>
      </fk-row>
      <fk-row class="grid-demo">
        <fk-col :span="8">
          <div>8 - 33.33%</div>
        </fk-col>
        <fk-col :span="8">
          <div>8 - 33.33%</div>
        </fk-col>
        <fk-col :span="8">
          <div>8 - 33.33%</div>
        </fk-col>
      </fk-row>
      <fk-row class="grid-demo">
        <fk-col :span="6">
          <div>6 - 25%</div>
        </fk-col>
        <fk-col :span="6">
          <div>6 - 25%</div>
        </fk-col>
        <fk-col :span="6">
          <div>6 - 25%</div>
        </fk-col>
        <fk-col :span="6">
          <div>6 - 25%</div>
        </fk-col>
      </fk-row>
      <fk-row class="grid-demo">
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
        <fk-col :span="4">
          <div>4 - 16.66%</div>
        </fk-col>
      </fk-row>
    </fk-space>
  </div>
</template>

<style scoped>
.grid-demo-background {
  background-image: linear-gradient(
    90deg,
    var(--color-fill-2) 4.16666667%,
    transparent 4.16666667%,
    transparent 8.33333333%,
    var(--color-fill-2) 8.33333333%,
    var(--color-fill-2) 12.5%,
    transparent 12.5%,
    transparent 16.66666667%,
    var(--color-fill-2) 16.66666667%,
    var(--color-fill-2) 20.83333333%,
    transparent 20.83333333%,
    transparent 25%,
    var(--color-fill-2) 25%,
    var(--color-fill-2) 29.16666667%,
    transparent 29.16666667%,
    transparent 33.33333333%,
    var(--color-fill-2) 33.33333333%,
    var(--color-fill-2) 37.5%,
    transparent 37.5%,
    transparent 41.66666667%,
    var(--color-fill-2) 41.66666667%,
    var(--color-fill-2) 45.83333333%,
    transparent 45.83333333%,
    transparent 50%,
    var(--color-fill-2) 50%,
    var(--color-fill-2) 54.16666667%,
    transparent 54.16666667%,
    transparent 58.33333333%,
    var(--color-fill-2) 58.33333333%,
    var(--color-fill-2) 62.5%,
    transparent 62.5%,
    transparent 66.66666667%,
    var(--color-fill-2) 66.66666667%,
    var(--color-fill-2) 70.83333333%,
    transparent 70.83333333%,
    transparent 75%,
    var(--color-fill-2) 75%,
    var(--color-fill-2) 79.16666667%,
    transparent 79.16666667%,
    transparent 83.33333333%,
    var(--color-fill-2) 83.33333333%,
    var(--color-fill-2) 87.5%,
    transparent 87.5%,
    transparent 91.66666667%,
    var(--color-fill-2) 91.66666667%,
    var(--color-fill-2) 95.83333333%,
    transparent 95.83333333%
  );
}
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

栅格偏移

指定 offset 可以对栅格进行平移操作。

代码事例

vue

<template>
  <div>
    <fk-row class="grid-demo" style="marginBottom: 16px; backgroundColor: var(--color-fill-2);">
      <fk-col :span="8">col - 8</fk-col>
      <fk-col :span="8" :offset="8">
        col - 8 | offset - 8
      </fk-col>
    </fk-row>
    <fk-row class="grid-demo" style="marginBottom: 16px; backgroundColor: var(--color-fill-2);">
      <fk-col :span="6" :offset="8">
        col - 6 | offset - 8
      </fk-col>
      <fk-col :span="6" :offset="4">
        col - 6 | offset - 4
      </fk-col>
    </fk-row>
    <fk-row class="grid-demo" style="backgroundColor: var(--color-fill-2)">
      <fk-col :span="12" :offset="8">
        col - 12 | offset - 8
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

区块间隔

通过在 Row 上指定 gutter 可以增加栅格的区域间隔。

代码事例

vue

<template>
  <div>
    <p>Horizontal</p>
    <fk-row class="grid-demo" :gutter="24">
      <fk-col :span="12">
        <div>col - 12</div>
      </fk-col>
      <fk-col :span="12">
        <div>col - 12</div>
      </fk-col>
    </fk-row>
    <p>Responsive</p>
    <fk-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
    </fk-row>
    <p>Horizontal and Vertical</p>
    <fk-row class="grid-demo" :gutter="[24, 12]">
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  color: var(--color-white);
}
.grid-demo .fk-col > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.grid-demo .fk-col:nth-child(2n) > div {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) > div {
  background-color: var(--color-primary-light-4);
}
</style>

水平布局

通过 justify 来进行水平布局。

代码事例

vue

<template>
  <div>
    <p>Arrange left</p>
    <fk-row class="grid-demo" justify="start">
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
    </fk-row>
    <p>Arrange center</p>
    <fk-row class="grid-demo" justify="center">
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
    </fk-row>
    <p>Arrange right</p>
    <fk-row class="grid-demo" justify="end">
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
    </fk-row>
    <p>Space around</p>
    <fk-row class="grid-demo" justify="space-around">
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
    </fk-row>
    <p>Space between</p>
    <fk-row class="grid-demo" justify="space-between">
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
      <fk-col :span="4">
        <div>col - 4</div>
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo {
  background-color: var(--color-fill-2);
  margin-bottom: 40px;
}
.grid-demo:last-child {
  margin-bottom: 0px;
}
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

垂直布局

通过 align 来进行垂直布局。

代码事例

vue

<template>
  <div>
    <p>Arrange top</p>
    <fk-row class="grid-demo" align="start">
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
    </fk-row>
    <p>Arrange center</p>
    <fk-row class="grid-demo" align="center">
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
    </fk-row>
    <p>Arrange bottom</p>
    <fk-row class="grid-demo" align="end">
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
      <fk-col :span="6">
        <div>col - 6</div>
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo {
  background-color: var(--color-fill-2);
  margin-bottom: 40px;
}
.grid-demo:last-child {
  margin-bottom: 0px;
}
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-of-type(1) {
  height: 90px;
  line-height: 90px;
}
.grid-demo .fk-col:nth-of-type(2) {
  height: 48px;
  line-height: 48px;
}
.grid-demo .fk-col:nth-of-type(3) {
  height: 120px;
  line-height: 120px;
}
.grid-demo .fk-col:nth-of-type(4) {
  height: 60px;
  line-height: 60px;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

排序

通过 order 来进行元素排序。

代码事例

vue

<template>
  <div>
    <fk-row class="grid-demo">
      <fk-col :span="6" :order="4">
        <div>1 col-order-4</div>
      </fk-col>
      <fk-col :span="6" :order="3">
        <div>2 col-order-3</div>
      </fk-col>
      <fk-col :span="6" :order="2">
        <div>3 col-order-2</div>
      </fk-col>
      <fk-col :span="6" :order="1">
        <div>4 col-order-1</div>
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

响应式布局

预置六种响应尺寸, 分别为 xs, sm, md, lg, xl, xxl。

代码事例

vue

<template>
  <fk-row class="grid-demo">
    <fk-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" :xxl="8">
      Col
    </fk-col>
    <fk-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" :xxl="8">
      Col
    </fk-col>
    <fk-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" :xxl="8">
      Col
    </fk-col>
  </fk-row>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

其他属性的响应式

span, offset, order 属性可以内嵌到 xs, sm, md, lg, xl, xxl 对象中使用。比如 :xs="8" 相当于 :xs="{ span: 8 }"。

代码事例

vue

<template>
  <div>
    <fk-row class="grid-demo">
      <fk-col :xs="{span: 5, offset: 1}" :lg="{span: 6, offset: 2}">
        Col
      </fk-col>
      <fk-col :xs="{span: 11, offset: 1}" :lg="{span: 6, offset: 2}">
        Col
      </fk-col>
      <fk-col :xs="{span: 5, offset: 1}" :lg="{span: 6, offset: 2}">
        Col
      </fk-col>
    </fk-row>
  </div>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

Flex 用法

通过设置 Col 组件的 flex 属性，可以任意配置 flex 布局。

代码事例

vue

<template>
  <fk-row class="grid-demo" style="margin-bottom: 16px;">
    <fk-col flex="100px">
      <div>100px</div>
    </fk-col>
    <fk-col flex="auto">
      <div>auto</div>
    </fk-col>
  </fk-row>
  <fk-row class="grid-demo" style="margin-bottom: 16px;">
    <fk-col flex="100px">
      <div>100px</div>
    </fk-col>
    <fk-col flex="auto">
      <div>auto</div>
    </fk-col>
    <fk-col flex="100px">
      <div>100px</div>
    </fk-col>
  </fk-row>
  <fk-row class="grid-demo" style="margin-bottom: 16px;">
    <fk-col :flex="3">
      <div>3 / 12</div>
    </fk-col>
    <fk-col :flex="4">
      <div>4 / 12</div>
    </fk-col>
    <fk-col :flex="5">
      <div>5 / 12</div>
    </fk-col>
  </fk-row>
</template>

<style scoped>
.grid-demo .fk-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}

.grid-demo .fk-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}

.grid-demo .fk-col:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
</style>

Grid 布局

基于 CSS 的 Grid 布局实现的布局组件，支持折叠，并且可以设置后缀节点，后缀节点会显示在一行的结尾。

代码事例

vue


<template>
  <div style="margin-bottom: 20px;">
    <fk-typography-text>折叠：</fk-typography-text>
    <fk-switch :checked="collapsed" @click="collapsed = !collapsed" />
  </div>
  <fk-grid :cols="3" :col-gap="12" :row-gap="16" class="grid-demo-grid" :collapsed="collapsed">
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item" :offset="1">item | offset - 1</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item" :span="3">item | span - 3</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item" suffix #="{ overflow }">
      suffix | overflow: {{ overflow }}
    </fk-grid-item>
  </fk-grid>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const collapsed = ref(false);

    return {
      collapsed
    }
  },
}
</script>

<style scoped>
.grid-demo-grid .demo-item,
.grid-demo-grid .demo-suffix {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}

.grid-demo-grid .demo-item:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}

.grid-demo-grid .demo-item:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

响应式的 Grid 布局

Grid 组件的响应式配置格式为 { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }。

代码事例

vue

<template>
  <fk-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :col-gap="12" :row-gap="16" class="grid-demo-grid">
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item">item</fk-grid-item>
    <fk-grid-item class="demo-item" :span="{ xl: 4, xxl: 6 }" suffix>
      suffix
    </fk-grid-item>
  </fk-grid>
</template>

<style scoped>
.grid-demo-grid .demo-item,
.grid-demo-grid .demo-suffix {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.grid-demo-grid .demo-item:nth-child(2n) {
  background-color: rgba(var(--fkblue-6), 0.9);
}
.grid-demo-grid .demo-item:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

API

`<row>` Props

参数名	描述	类型	默认值	版本
gutter	栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距，垂直间距 ] 来设置两个方向。	`number \| ResponsiveValue \| [number \| ResponsiveValue, number \| ResponsiveValue]`	`0`
justify	水平对齐方式 (`justify-content`)	`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'`	`'start'`
align	竖直对齐方式 ( `align-items` )	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`
div	开启这个选项`Row`和`Col`都会被当作div而不会附带任何Grid相关的类和样式	`boolean`	`false`
wrap	`Col` 是否支持换行	`boolean`	`true`	1.0.0

`<col>` Props

参数名	描述	类型	默认值	版本
span	栅格占位格数	`number`	`24`
offset	栅格左侧的间隔格数，间隔内不可以有栅格	`number`	`-`
order	对元素进行排序	`number`	`-`
xs	< 576px 响应式栅格	`number \| { [key: string]: any }`	`-`
sm	>= 576px 响应式栅格	`number \| { [key: string]: any }`	`-`
md	>= 768px 响应式栅格	`number \| { [key: string]: any }`	`-`
lg	>= 992px 响应式栅格	`number \| { [key: string]: any }`	`-`
xl	>= 1200px 响应式栅格	`number \| { [key: string]: any }`	`-`
xxl	>= 1600px 响应式栅格	`number \| { [key: string]: any }`	`-`
flex	设置 flex 布局属性	`number \| string \| 'initial' \| 'auto' \| 'none'`	`-`	1.0.0

`<grid>` Props (1.0.0)

响应式配置从 1.0.0 开始支持，具体配置 ResponsiveValue

参数名	描述	类型	默认值
cols	每一行展示的列数	`number \| ResponsiveValue`	`24`
row-gap	行与行之间的间距	`number \| ResponsiveValue`	`0`
col-gap	列与列之间的间距	`number \| ResponsiveValue`	`0`
collapsed	是否折叠	`boolean`	`false`
collapsed-rows	折叠时显示的行数	`number`	`1`

`<grid>` Events (1.0.0)

事件名	描述	参数
layout	重新布局触发	-

`<grid-item>` Props (1.0.0)

响应式配置从 1.0.0 开始支持，具体配置 ResponsiveValue

参数名	描述	类型	默认值
span	跨越的格数	`number \| ResponsiveValue`	`1`
offset	左侧的间隔格数	`number \| ResponsiveValue`	`0`
suffix	是否是后缀元素	`boolean`	`false`

ResponsiveValue

参数名	描述	类型	默认值
xxl	>= 1600px 响应式配置	`number`	`-`
xl	>= 1200px 响应式配置	`number`	`-`
lg	>= 992px 响应式配置	`number`	`-`
md	>= 768px 响应式配置	`number`	`-`
sm	>= 576px 响应式配置	`number`	`-`
xs	< 576px 响应式配置	`number`	`-`

Form 动态表单

SearchForm 查询表单

Table 数据表格

栅格 Grid

基本用法

栅格偏移

区块间隔

水平布局

垂直布局

排序

响应式布局

其他属性的响应式

Flex 用法

Grid 布局

响应式的 Grid 布局

API

`<row>` Props

`<col>` Props

`<grid>` Props (1.0.0)

`<grid>` Events (1.0.0)

`<grid-item>` Props (1.0.0)

ResponsiveValue

栅格 Grid ​

基本用法 ​

栅格偏移 ​

区块间隔 ​

水平布局 ​

垂直布局 ​

排序 ​

响应式布局 ​

其他属性的响应式 ​

Flex 用法 ​

Grid 布局 ​

响应式的 Grid 布局 ​

API ​

<row> Props ​

<col> Props ​

<grid> Props (1.0.0) ​

<grid> Events (1.0.0) ​

<grid-item> Props (1.0.0) ​

ResponsiveValue ​

栅格 Grid

基本用法

栅格偏移

区块间隔

水平布局

垂直布局

排序

响应式布局

其他属性的响应式

Flex 用法

Grid 布局

响应式的 Grid 布局

API

`<row>` Props

`<col>` Props

`<grid>` Props (1.0.0)

`<grid>` Events (1.0.0)

`<grid-item>` Props (1.0.0)

ResponsiveValue