Chi-UI

Appearance

Grid 栅格布局 ​

代码示例 ​

基础用法 ​

单行栅格布局。

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

width-24

width-12
width-12
<template>
  <chi-grid :gap="8">
    <chi-cell>
      <div class="content">width-24</div>
    </chi-cell>
  </chi-grid>
  <br />
  <chi-grid :columns="24" :gap="8">
    <chi-cell :width="12">
      <div class="content">width-12</div>
    </chi-cell>
    <chi-cell :width="12">
      <div class="content">width-12</div>
    </chi-cell>
  </chi-grid>
</template>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background-color: var(--chi-color-primary);
  border-radius: var(--chi-radius-base);
  color: #fff;
}
</style>

定制栅格 ​

Grid 组件的 rows 和 columns 属性，可以传入数字定制栅格的模板行和模板列的大小。

如果这还不满足需求，这两项属性还支持传入字符串和数组，传入字符串时将会直接赋值给对应的 grid-template 样式属性，传入数组时则会组装后再赋值。

注意一：数组内的数字元素默认单位为 fr。

注意二：Cell 组件默认宽度为 24，当显式地设置了 Grid 的 columns 属性后，如果这是一个数字，则 Cell 组件的默认宽度会与之对齐，其他情况则会变为 1。

width-1(300px), height-2
width-2, height-1
width-1(1fr)
width-1(1fr)
<template>
  <chi-grid :gap="8" :columns="['300px', 'repeat(2, 1fr)']">
    <chi-cell :width="1" :height="2">
      <div class="content">width-1(300px), height-2</div>
    </chi-cell>
    <chi-cell :width="2" :height="1">
      <div class="content">width-2, height-1</div>
    </chi-cell>
    <chi-cell v-for="n in 2" :key="n" :width="1">
      <div class="content">width-1(1fr)</div>
    </chi-cell>
  </chi-grid>
</template>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background-color: var(--chi-color-primary);
  border-radius: var(--chi-radius-base);
  color: #fff;
}
</style>

栅格间距 ​

通过设置 Grid 组件的 gap 属性，可以为栅格增加间距。

传入一个数组可以分别控制横向和纵向的间距。

width-6
width-6
width-6
width-6
width-6
width-6
width-6
width-6
width-6
width-6
width-6
width-6
<template>
  <chi-grid :gap="[16, 24]" :columns="24">
    <chi-cell v-for="n in 12" :key="n" :width="6">
      <div class="content">width-6</div>
    </chi-cell>
  </chi-grid>
</template>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background-color: var(--chi-color-primary);
  border-radius: var(--chi-radius-base);
  color: #fff;
}
</style>

自由布局 ​

Cell 组件在纵横方向上分别有三个属性：top、bottom、height 和 left、right、width。

两个方向都可以通过设置其中的两个属性来为栅格定位。

width-8 左上
width-8 右上
width-8 上中
width-8 左中
width-8 右中
width-24
width-8 左下
width-8 右下
width-16
width-24
<template>
  <chi-grid :auto-rows="1" :gap="8">
    <chi-cell :left="0" :right="8">
      <div class="content">width-8 左上</div>
    </chi-cell>
    <chi-cell :width="8" :left="16">
      <div class="content">width-8 右上</div>
    </chi-cell>
    <chi-cell :width="8" :top="1" :bottom="3" :right="16">
      <div class="content">width-8 上中</div>
    </chi-cell>
    <chi-cell :width="8" :top="2">
      <div class="content">width-8 左中</div>
    </chi-cell>
    <chi-cell :width="8" :top="2" :left="16">
      <div class="content">width-8 右中</div>
    </chi-cell>
    <chi-cell :height="2" :top="3">
      <div class="content">width-24</div>
    </chi-cell>
    <chi-cell :width="8" :top="5">
      <div class="content">width-8 左下</div>
    </chi-cell>
    <chi-cell :width="8" :top="5" :left="16">
      <div class="content">width-8 右下</div>
    </chi-cell>
    <chi-cell :width="16" :top="6" left="9">
      <div class="content">width-16</div>
    </chi-cell>
    <chi-cell :top="7">
      <div class="content">width-24</div>
    </chi-cell>
  </chi-grid>
</template>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background-color: var(--chi-color-primary);
  border-radius: var(--chi-radius-base);
  color: #fff;
}
</style>

子元素弹性布局 ​

通过在 Grid 组件设置 cell-flex 属性为 true，或传入 {justify, align} 对象来开启 Cell 组件内的弹性布局。

通过在 Cell 组件设置 use-flex 属性为 true，或传入 {justify, align} 对象来为单独 Cell 组件开启弹性布局。

将 Cell 组件的 use-flex 属性显式地设置为 false，则可以禁用其弹性布局。

1
2
3
4
5
6
77
77
<template>
  <chi-grid :cell-flex="cellFlex" :gap="8" :auto-rows="1">
    <chi-cell
      v-for="i in 6"
      :key="i"
      :width="8"
      style="background-color: var(--chi-color-primary); color: white"
    >
      {{ i }}
    </chi-cell>
    <chi-cell
      :use-flex="{ align: 'bottom', justify: 'space-evenly' }"
      :height="2"
      :width="8"
      style="background-color: var(--chi-color-primary); color: white"
    >
      <span>7</span>
      <span>7</span>
    </chi-cell>
    <chi-cell
      :use-flex="false"
      :height="2"
      :width="8"
      style="background-color: var(--chi-color-primary); color: white"
    >
      <span>7</span>
      <span>7</span>
    </chi-cell>
  </chi-grid>
</template>

<script setup>
const cellFlex = {
  align: 'middle',
  justify: 'center',
}
</script>

API ​

Grid 属性 ​

名称类型说明默认值
align'top' | 'middle' | 'bottom' | 'stretch'垂直对齐方式'stretch'
auto-columnsnumber | string | (number | string)[]设置栅格的自动列，同 grid-auto-columns，传入数字时以及数组中的数字元素默认单位为 fr'auto'
auto-rowsnumber | string | (number | string)[]设置栅格的自动行，同 grid-auto-rows，传入数字时以及数组中的数字元素默认单位为 fr'auto'
cell-flexboolean | { justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly', align?: 'top' | 'middle' | 'bottom' }设置其下的栅格是否为弹性布局，可以传入一个 {justify, align} 进行定制化false
gapnumber|number[]栅格间隔，可以传入 [horizontal, vertical] 的数组0
rowsnumber | string | (number | string)[]设置栅格的模板行，同 grid-template-rows，传入数字时将当作行数并使用 repeat 处理，数组中的数字元素默认单位为 fr'none'

Cell 属性 ​

名称类型说明默认值
bottomnumber | string设置栅格的下边界，传入数字时起始值为 0，应仅用 top、bottom 和 height 中的两个属性来确定栅格的纵向属性''
heightnumber设置栅格的高度占位，默认为占一行1
leftnumber | string设置栅格的左边界，传入数字时起始值为 0'auto'
rightnumber | string设置栅格的右边界，传入数字时起始值为 0，应仅用 left、right 和 width 中的两个属性来确定栅格的横向属性''
topnumber | string设置栅格的上边界，传入数字时起始值为 0'auto'
use-flexboolean | { justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly', align?: 'top' | 'middle' | 'bottom' }设置是否为弹性布局，同时在上层开启了 cell-flex 时，将优先栅格自身的弹性布局设置，显式地设置成 false 可以强制禁用弹性布局false
widthnumber设置栅格的宽度占位，默认为占满一行，会根据上级 Grid 的 columns 有不一样的默认表现null