Grid 宫格

宫格组件可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

导入

import Grid from '@/components/layout/grid/Grid.vue'
import GridItem from '@/components/layout/grid/GridItem.vue'

用法

基础用法

通过 icon 属性设置格子内的图标，title 属性设置文字内容。

<template>
  <Grid>
    <GridItem title="可点击" touchable icon="picture-filling" @click="onClick" />
    <GridItem title="本地图片" :icon="logo" :iconSize="30" />
    <GridItem title="URL图片" icon="https://imengyu.top/assets/images/test/icon.png" />
    <GridItem title="颜色" icon="picture-filling" iconColor="primary" titleColor="primary" />
    <GridItem title="文字" icon="picture-filling" iconColor="danger" />
    <GridItem title="文字" icon="picture-filling" iconColor="success" />
    <GridItem title="文字" icon="picture-filling" iconColor="warning" />
    <GridItem title="文字" icon="picture-filling" iconColor="#f60" />
  </Grid>
</template>

<script setup>
function onClick() {
  uni.showToast({ title: '点击' });
}
</script>

自定义列数

默认一行展示四个格子，可以通过 mainAxisCount 属性自定义列数。

<template>
  <Grid :mainAxisCount="3">
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
  </Grid>
</template>

正方形格子

设置 square 属性后，格子的高度会和宽度保持一致。

<template>
  <Grid :mainAxisCount="4" square>
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
  </Grid>
</template>

内容横排

将 direction 属性设置为 horizontal，可以让宫格的内容呈横向排列。

<template>
  <Grid direction="horizontal">
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
  </Grid>
</template>

无边框

设置 borderGrid 为 false 可以隐藏宫格的边框。

<template>
  <Grid :borderGrid="false">
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
    <GridItem title="文字" icon="picture-filling" />
  </Grid>
</template>

自定义渲染内容

通过默认插槽可以自定义 GridItem 的内容。

<template>
  <Grid :mainAxisCount="3">
    <GridItem>
      <Image src="https://imengyu.top/assets/images/test/icon.png" :width="170" :height="170" />
    </GridItem>
    <GridItem>
      <Image src="https://imengyu.top/assets/images/test/icon.png" :width="170" :height="170" />
    </GridItem>
    <GridItem>
      <Image src="https://imengyu.top/assets/images/test/icon.png" :width="170" :height="170" />
    </GridItem>
  </Grid>
</template>

API 参考

Grid

宫格容器组件，用于包裹 GridItem 组件。

Props

名称	说明	类型	必填	默认值
direction	内容排列方式	'horizontal' | 'vertical' | 'vetical-reverse' | 'horizontal-reverse'	-	'vertical'
crossAxisSpacing	交叉轴元素间距	number	-	0
mainAxisCount	主轴上的元素数量	number	-	4
mainAxisSpacing	主轴元素间距	number	-	0
square	格子是否为正方形	boolean	-	false
borderGrid	是否显示边框	boolean	-	true
borderWidth	边框的宽度	number | string	-	'1px'
borderColor	边框颜色	string	-	'border.cell'
widthCut	宽度减去的值	number | string	-	0

Slots

名称	说明
default	用于放置 GridItem 组件

GridItem

宫格项组件，必须作为 Grid 的子组件使用。

Props

名称	说明	类型	必填	默认值
title	标题	string	-	-
titleColor	文字颜色	string	-	'text.title'
titleStyle	文字自定义样式	object	-	{}
backgroundColor	背景颜色	string	-	'white'
touchable	是否开启点击反馈	boolean	-	true
highlightColor	点击高亮颜色	string	-	'pressed.white'
icon	图标名称或图片链接（http/https）	string	-	-
iconSize	图标大小	number	-	42
iconColor	图标颜色	string	-	'text.content'
iconProps	图标自定义属性	IconProps	-	-
iconStyle	图标自定义样式	object	-	{}
subTitle	如果填写，则在图片位置显示文字，同时icon不生效	string | false	-	false
subTitleColor	subTitle 文字颜色	string	-	'text.second'
subTitleStyle	subTitle 文字样式	object	-	{}
direction	格子内容排列的方向	'vetical' | 'horizontal' | 'vetical-reverse' | 'horizontal-reverse'	-	'vetical'
innerStyle	自定义样式	object	-	{}
radius	圆角	number | string	-	0

Slots

名称	说明
default	GridItem 内容区域，用于自定义显示内容

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
GridBorderSize	string	'1px'	宫格边框宽度
GridBorderColor	string	'border.cell'	宫格边框颜色
GridItemBackgroundColor	string	'white'	宫格项背景颜色
GridItemHighlightColor	string	'pressed.white'	宫格项点击高亮颜色
GridItemIconColor	string	'text.content'	宫格项图标颜色
GridItemIconSize	number	42	宫格项图标大小
GridItemIconStyle	object	{}	宫格项图标样式
GridItemIconMarginVertical	number	10	宫格项图标垂直边距
GridItemIconMarginHorizontal	number	8	宫格项图标水平边距
GridItemPaddingVertical	number	22	宫格项垂直内边距
GridItemPaddingHorizontal	number	8	宫格项水平内边距
GridItemRadius	number	0	宫格项圆角
GridItemSubTitle	string | false	false	宫格项副标题
GridItemSubTitleStyle	object	{}	宫格项副标题样式
GridItemSubTitleColor	string	'text.second'	宫格项副标题颜色
GridItemSubTitleFontSize	number	24	宫格项副标题字体大小
GridItemSubTitleMarginTop	number	10	宫格项副标题上外边距
GridItemTitleColor	string	'text.title'	宫格项标题颜色
GridItemTitleStyle	object	{}	宫格项标题样式
GridItemStyle	object	{}	宫格项自定义样式
GridItemDirection	string	'vetical'	宫格项内容排列方向