Sard

Appearance

100%
在新窗口打开⤴

Grid宫格

介绍 ​

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

代码演示 ​

基础使用 ​

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

vue
<template>
  <s-grid>
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid>
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

自定义列数 ​

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

vue
<template>
  <s-grid :columns="3">
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid :columns="3">
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

正方形格子 ​

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

vue
<template>
  <s-grid :columns="3" square>
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid :columns="3" square>
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

格子间距 ​

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

vue
<template>
  <s-grid :columns="4" :gap="10">
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid :columns="3" square :gap="10" class="mt-4">
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid :columns="4" :gap="10">
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid :columns="3" square :gap="10" class="mt-4">
    <s-grid-item v-for="i in 6" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

显示边框 ​

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

vue
<template>
  <s-grid bordered>
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid bordered :gap="10" class="mt-4">
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid bordered>
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid bordered :gap="10" class="mt-4">
    <s-grid-item v-for="i in 8" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

内容横排 ​

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

vue
<template>
  <s-grid direction="horizontal">
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid direction="horizontal">
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

内容翻转 ​

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

vue
<template>
  <s-grid direction="horizontal" reverse>
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid direction="vertical" reverse class="mt-4">
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid direction="horizontal" reverse>
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>

  <s-grid direction="vertical" reverse class="mt-4">
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

可点击的 ​

添加点击态。

vue
<template>
  <s-grid clickable>
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid clickable>
    <s-grid-item v-for="i in 4" :key="i" text="文字" #icon>
      <Image />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

徽标提示 ​

可结合图标插槽和徽标组件。

vue
<template>
  <s-grid :columns="2">
    <s-grid-item text="文字" #icon>
      <s-badge dot>
        <Image />
      </s-badge>
    </s-grid-item>
    <s-grid-item text="文字" #icon>
      <s-badge :value="999">
        <Image />
      </s-badge>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
</script>
vue
<template>
  <s-grid :columns="2">
    <s-grid-item text="文字" #icon>
      <s-badge dot>
        <Image />
      </s-badge>
    </s-grid-item>
    <s-grid-item text="文字" #icon>
      <s-badge :value="999">
        <Image />
      </s-badge>
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
</script>

自定义内容 ​

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

vue
<template>
  <s-grid>
    <s-grid-item v-for="i in 4" :key="i">
      <template #content>
        <div class="grid-box">{{ i }}</div>
      </template>
    </s-grid-item>
  </s-grid>

  <s-grid :columns="3" square :gap="8" class="mt-4">
    <s-grid-item v-for="url in urls" :key="url">
      <s-image :src="url" width="100%" height="100%" radius="8px" class="flex!" />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="ts">
const urls = [
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg',
]
</script>

<style lang="scss" scoped>
.grid-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 24px;
  background-color: var(--s-fill-color-secondary);
  border-radius: 50%;
}
</style>
vue
<template>
  <s-grid>
    <s-grid-item v-for="i in 4" :key="i">
      <template #content>
        <div class="grid-box">{{ i }}</div>
      </template>
    </s-grid-item>
  </s-grid>

  <s-grid :columns="3" square :gap="8" class="mt-4">
    <s-grid-item v-for="url in urls" :key="url">
      <s-image :src="url" width="100%" height="100%" radius="8px" class="flex!" />
    </s-grid-item>
  </s-grid>
</template>

<script setup lang="js">
const urls = [
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg',
  'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg',
]
</script>

<style lang="scss" scoped>
.grid-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 24px;
  background-color: var(--s-fill-color-secondary);
  border-radius: 50%;
}
</style>

API ​

GridProps ​

属性描述类型默认值
columns列数number4
gap格子间距string0
bordered是否显示边框booleanfalse
square是否将格子显示为正方形booleanfalse
clickable格子是否可点击booleanfalse
reverse是否调换图标和文本的位置booleanfalse
direction格子排列方向'horizontal' | 'vertical''vertical'

GridSlots ​

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

GridItemProps ​

属性描述类型默认值
content-class内容元素类名string-
content-style内容元素样式StyleValue-
text自定义文字内容string-
dot是否显示宫格项右上角小红点booleanfalse
badge宫格项右上角徽标的内容number | string-
badge-props自定义徽标属性BadgeProps-

GridItemSlots ​

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

GridItemEmits ​

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

主题定制 ​

样式变量 ​

CSS 变量值
--s-grid-bgvar(--s-bg-color-container)
--s-grid-bg-activevar(--s-bg-color-active)
--s-grid-border-colorvar(--s-border-color)
--s-grid-content-padding-xvar(--s-size-xs)
--s-grid-content-padding-yvar(--s-size)
--s-grid-content-gapvar(--s-size-xs)
--s-grid-icon-sizevar(--s-size-xl)
--s-grid-text-font-sizevar(--s-font-size-sm)
--s-grid-text-line-heightvar(--s-line-height-tight)
--s-grid-text-colorvar(--s-text-color-primary)

Released under the MIT License.

Copyright © 2023-present wuzhitao