Suite Kit

Appearance

Grid布局组件 ​

使用display:grid实现的网格布局组件，默认栅栏列数是24

警告

Grid组件的子元素只能是GridItem

提示

Grid组件内部使用的断点是参照El-Layout设计的

安装 ​

sh
yarn add @suite-kit/grid
# or
npm i @suite-kit/grid
yarn add @suite-kit/grid
# or
npm i @suite-kit/grid

基础用法 ​

<template>
	<Grid :gap="[20, 20]" :cols="24">
		<GridItem v-for="item in 8" :key="item" :span="item % 2 == 0 ? 8 : 4">
			<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
		</GridItem>
	</Grid>
</template>

<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
</script>

<style scoped lang="scss">
.box {
	width: 100%;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
.light-3 {
	background-color: var(--el-color-primary-light-3);
}
.dark {
	background-color: var(--el-color-primary-dark-2);
}
</style>

间隔 ​

可以传递数组精准控制两个方向的间距，也可以传递一个数字同时设置两个方向的间距

<template>
	<div>
		<el-space size="large">
			<div style="width: 200px">
				<el-form-item label="横向间距">
					<el-input-number :max="100" :min="0" v-model="gap.x"></el-input-number>
				</el-form-item>
			</div>
			<div style="width: 200px">
				<el-form-item label="纵向间距">
					<el-input-number :max="100" :min="0" v-model="gap.y"></el-input-number>
				</el-form-item>
			</div>
		</el-space>
		<Grid :gap="[gap.x, gap.y]">
			<GridItem v-for="item in 8" :key="item" :span="6">
				<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
			</GridItem>
		</Grid>
		<hr />
		<el-space size="large">
			<div style="width: 200px">
				<el-form-item label="间距">
					<el-input-number :max="100" :min="0" v-model="gap.total"></el-input-number>
				</el-form-item>
			</div>
		</el-space>
		<Grid :gap="gap.total">
			<GridItem v-for="item in 8" :key="item" :span="6">
				<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
			</GridItem>
		</Grid>
	</div>
</template>

<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
import { ElFormItem, ElSpace, ElInputNumber } from "element-plus";
import { reactive } from "vue";

const gap = reactive({
	x: 20,
	y: 20,
	total: 20,
});
</script>

<style scoped lang="scss">
.box {
	width: 100%;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
.light-3 {
	background-color: var(--el-color-primary-light-3);
}
.dark {
	background-color: var(--el-color-primary-dark-2);
}
</style>

偏移 ​

设置offset来控制GridItem的偏移量，也可以设置响应式的offset

<template>
	<Grid :gap="[20, 20]" :cols="24">
		<GridItem v-for="item in 8" :key="item" :span="item % 2 === 0 ? 5 : 4" :offset="item % 2 == 0 ? 1 : 2">
			<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
		</GridItem>
	</Grid>
	<hr />
	<Grid :gap="[20, 20]" :cols="24">
		<GridItem v-for="item in 6" :key="item" :span="6" :offset="item === 2 ? 2 : 0">
			<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'"> {{ item }}</div>
		</GridItem>
	</Grid>
</template>

<script setup lang="ts">
import { Grid, GridItem } from "@suite-kit/grid";
</script>

<style scoped lang="scss">
.box {
	width: 100%;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
.light-3 {
	background-color: var(--el-color-primary-light-3);
}
.dark {
	background-color: var(--el-color-primary-dark-2);
}
</style>

响应式列数 ​

Grid组件默认生成的响应式列数是24列，可传入cols手动设置，除了传入一个固定的数字外，也可传入响应式配置

<template>
	<Grid :gap="[20, 20]" :cols="24">
		<GridItem v-for="item in 8" :key="item" v-bind="responsive">
			<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
		</GridItem>
	</Grid>
	<hr />
	<Grid :gap="[20, 20]" :cols="{ xs: 1, sm: 2, md: 3, xl: 4, lg: 4 }">
		<GridItem v-for="item in 8" :key="item">
			<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
		</GridItem>
	</Grid>
</template>

<script setup lang="ts">
import { Grid, GridItem, BreakPoint } from "@suite-kit/grid";
import { reactive } from "vue";
const responsive = reactive<{ span: { [K in BreakPoint]: number } }>({
	span: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 },
});
</script>

<style scoped lang="scss">
.box {
	width: 100%;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
.light-3 {
	background-color: var(--el-color-primary-light-3);
}
.dark {
	background-color: var(--el-color-primary-dark-2);
}
</style>

折叠 ​

设置collapsed来控制折叠状态，设置collapsedRows控制折叠后的行数

<template>
	<el-button type="primary" @click="click">{{ collapsed ? "展开" : "折叠" }}</el-button>
	<p></p>
	<Grid :gap="[20, 20]" :cols="24" :collapsed="collapsed" :collapsed-rows="1">
		<template v-for="item in 10" :key="item">
			<GridItem :span="4">
				<div class="box" :class="item % 2 == 0 ? 'light-3' : 'dark'">{{ item }}</div>
			</GridItem>
		</template>
		<GridItem :span="4" suffix #="{ overflow }">
			<div class="box">
				{{ overflow ? "溢出" : "未溢出" }}
			</div>
		</GridItem>
	</Grid>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElButton } from "element-plus";
import { Grid, GridItem } from "@suite-kit/grid";
const collapsed = ref(true);
const click = () => {
	collapsed.value = !collapsed.value;
};
</script>

<style scoped lang="scss">
.box {
	width: 100%;
	height: 32px;
	background-color: var(--el-color-success);
	line-height: 32px;
	text-align: center;
}
.light-3 {
	background-color: var(--el-color-primary-light-3);
}
.dark {
	background-color: var(--el-color-primary-dark-2);
}
</style>

Grid属性 ​

参数说明类型默认值
cols栅栏列数number | { xs: number, sm: number, md: number, lg: number, xl: number }24
collapsed是否折叠booleanfalse
collapsedRows折叠后行数number1
gap栅栏间距number | [xGap:number,yGap:number]0

GridItem属性 ​

参数说明类型默认值
span占据的列数number|Record<'xs'|'sm'|'md'|'lg'|'xl'>1
offset栅栏偏移量number|Record<'xs'|'sm'|'md'|'lg'|'xl'>0
suffix是否后缀booleanfalse

MIT License.

Copyright © 2023 Suite-Kit