介绍

将多个类目进行等宽排列，用于内容展示或者页面导航。

引入

import Grid from 'sard-uniapp/components/grid/grid.vue'
import GridItem from 'sard-uniapp/components/grid-item/grid-item.vue'

代码演示

基础使用

使用text属性设置文本内容，使用icon属性设置图标。

<template>
  <sar-grid>
    <sar-grid-item v-for="i in 8" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

自定义列数

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

<template>
  <sar-grid :columns="3">
    <sar-grid-item v-for="i in 6" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

正方形格子

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

<template>
  <sar-grid :columns="3" square>
    <sar-grid-item v-for="i in 6" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

格子间距

通过gap属性设置格子之间的距离。

<template>
  <sar-grid :columns="4" gap="20rpx">
    <sar-grid-item v-for="i in 8" :key="i" text="文字" icon="image" />
  </sar-grid>

  <sar-grid :columns="3" square gap="20rpx">
    <sar-grid-item v-for="i in 6" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

显示边框

显示边框后看起来分割更明显。

<template>
  <sar-grid bordered>
    <sar-grid-item v-for="i in 8" :key="i" text="文字" icon="image" />
  </sar-grid>

  <sar-grid bordered gap="20rpx">
    <sar-grid-item v-for="i in 8" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

内容横排

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

<template>
  <sar-grid direction="horizontal">
    <sar-grid-item v-for="i in 4" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

内容翻转

将文本和图标的位置调换。

<template>
  <sar-grid direction="horizontal" reverse>
    <sar-grid-item v-for="i in 4" :key="i" text="文字" icon="image" />
  </sar-grid>

  <sar-grid direction="vertical" reverse>
    <sar-grid-item v-for="i in 4" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

可点击的

添加点击态。

<template>
  <sar-grid clickable>
    <sar-grid-item v-for="i in 4" :key="i" text="文字" icon="image" />
  </sar-grid>
</template>

徽标提示

添加点击态。

<template>
  <sar-grid :columns="2">
    <sar-grid-item text="文字" icon="image" dot />
    <sar-grid-item text="文字" icon="image" :badge="999" />
  </sar-grid>
</template>

自定义内容

通过默认插槽可以自定义格子展示的内容。

<template>
  <sar-grid>
    <sar-grid-item v-for="i in 4" :key="i">
      <view class="grid-box">{{ i }}</view>
    </sar-grid-item>
  </sar-grid>
</template>

<style lang="scss" scoped>
.grid-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128rpx;
  height: 128rpx;
  font-size: 48rpx;
  background-color: var(--sar-secondary-bg);
  border-radius: 50%;
}
</style>

API

GridProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
columns	列数	number	4
gap	格子间距	string	0
bordered	是否显示边框	boolean	false
square	是否将格子显示为正方形	boolean	false
clickable	格子是否可点击	boolean	false
reverse	是否调换图标和文本的位置	boolean	false
direction	格子排列方向	'horizontal' | 'vertical'	'vertical'

GridSlots

插槽	描述	属性
default	自定义默认内容	-

GridItemProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
content-class	内容元素类名	string	-
content-style	内容元素样式	StyleValue	-
text	自定义文字内容	string	-
icon	图标名称，可以为图片路径	string	-
icon-size	图标尺寸	string	-
icon-color	图标颜色	string	-
icon-family	图标字体名称	string	-
dot 1.12+	是否显示宫格项右上角小红点	boolean	false
badge 1.12+	宫格项右上角徽标的内容	number | string	-
badge-props 1.12+	自定义徽标属性	BadgeProps	-

GridItemSlots

插槽	描述	属性
default	自定义默认内容，会覆盖文字和图标	-
text	自定义文字内容，会覆盖text属性	-
icon	自定义图标内容，会覆盖icon属性	-

GridItemEmits

事件	描述	类型
click	点击格子时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-grid-bg: var(--sar-emphasis-bg);
  --sar-grid-border-color: var(--sar-border-color);
  --sar-grid-active-bg: var(--sar-active-bg);

  --sar-grid-item-padding-x: 16rpx;
  --sar-grid-item-padding-y: 32rpx;

  --sar-grid-item-icon-size: 48rpx;

  --sar-grid-item-text-gap: 16rpx;
  --sar-grid-item-text-font-size: var(--sar-text-sm);
  --sar-grid-item-text-line-height: var(--sar-leading-tight);
}