PhotoWall

Introduction

The PhotoWall component is used to create photo wall layouts with multiple layout modes and interactive effects. It can display images, gradient backgrounds, text content, etc., creating rich visual effects.

Component Features:

Irregular layout design that creates dynamic visual hierarchy
All images are forced to display as squares for optimal presentation
Supports multiple card sizes (xs, sm, md, lg, xl)
Supports gradient backgrounds and text content
Supports hover and click effects
Responsive design that adapts to different screen sizes
Supports custom styles and animations

Example

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  background="info/10"
  title="精彩的回忆"
  subtitle="记录每一个美好瞬间"
  padding="2xl"
/>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="info/10" title="精彩的回忆" subtitle="记录每一个美好瞬间" padding="2xl" />
</template>

Props

background

Container background color, supports multiple preset semantic background colors.

精彩的回忆

记录每一个美好瞬间

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  background="info/10"
  title="精彩的回忆"
  subtitle="记录每一个美好瞬间"
  padding="2xl"
/>

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} background="info/10" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} background="success/10" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} background="warning/10" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} background="error/10" />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="primary" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="secondary" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="accent" />
</template>

border

Whether to show border, when set to true, shows container border.

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  background="info/10"
  title="精彩的回忆"
  subtitle="记录每一个美好瞬间"
  padding="2xl"
/>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="info/10" title="精彩的回忆" subtitle="记录每一个美好瞬间" padding="2xl" />
</template>

centered

Whether to center display, when set to true, container is centered.

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  background="info/10"
  title="精彩的回忆"
  subtitle="记录每一个美好瞬间"
  padding="2xl"
/>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="info/10" title="精彩的回忆" subtitle="记录每一个美好瞬间" padding="2xl" />
</template>

clickable

Whether to enable click effects, when set to true, cards are clickable.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} clickable={false} />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} clickable={true} />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" :clickable="false" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" :clickable="true" />
</template>

gap

Card spacing, supports none, xs, sm, md, lg, xl six spacing options.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="none" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="xs" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="sm" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="md" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="lg" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} gap="xl" />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="none" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="xs" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="sm" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="md" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="lg" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" gap="xl" />
</template>

hover

Whether to enable hover effects, when set to true, shows hover animations.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} hover={false} />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} hover={true} />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" :hover="false" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" :hover="true" />
</template>

padding

Container padding, supports none, sm, md, lg, xl, 2xl, 3xl, 4xl eight padding options.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} padding="none" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} padding="sm" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} padding="md" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} padding="lg" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} padding="xl" />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" padding="none" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" padding="sm" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" padding="md" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" padding="lg" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" padding="xl" />
</template>

photos

Photo card data array, containing image information, titles, styles, etc.

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  background="info/10"
  title="精彩的回忆"
  subtitle="记录每一个美好瞬间"
  padding="2xl"
/>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" background="info/10" title="精彩的回忆" subtitle="记录每一个美好瞬间" padding="2xl" />
</template>

rounded

Card border radius, supports none, sm, md, lg, xl, 2xl, 3xl, full eight radius options.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="none" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="sm" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="md" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="lg" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="xl" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="2xl" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="3xl" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} rounded="full" />

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="none" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="sm" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="md" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="lg" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="xl" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="2xl" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="3xl" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" rounded="full" />
</template>

subtitle

Center subtitle, used together with title, displayed below the title.

相册

精选

美好回忆

珍藏时光

2024年旅行回忆相册

记录每一个美好瞬间

点击查看

相册

精选

点击查看

美好回忆

珍藏时光

点击查看

2024年旅行回忆相册

记录每一个美好瞬间

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} title="相册" subtitle="精选" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} title="美好回忆" subtitle="珍藏时光" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall
  photos={photoWallPhotos}
  title="2024年旅行回忆相册"
  subtitle="记录每一个美好瞬间"
/>

<template>
    <PhotoWall :photos="photoWallPhotos" title="相册" subtitle="精选" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" title="美好回忆" subtitle="珍藏时光" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" title="2024年旅行回忆相册" subtitle="记录每一个美好瞬间" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

title

Center title, displays title text in the center of the photo wall with a mask effect to ensure readability.

相册

美好回忆

2024年旅行回忆相册

点击查看

相册

点击查看

美好回忆

点击查看

2024年旅行回忆相册

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} title="相册" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} title="美好回忆" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} title="2024年旅行回忆相册" />

<template>
    <PhotoWall :photos="photoWallPhotos" title="相册" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" title="美好回忆" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" title="2024年旅行回忆相册" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

width

Container width, supports multiple preset sizes.

点击查看

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="none" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="sm" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="md" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="lg" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="xl" />

---



import { PhotoWall } from "@coffic/cosy-ui";
import { photoWallPhotos } from "./example-data";
---

<PhotoWall photos={photoWallPhotos} width="full" />

<template>
    <PhotoWall :photos="photoWallPhotos" width="none" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" width="sm" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" width="md" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" width="lg" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" width="xl" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>

<template>
    <PhotoWall :photos="photoWallPhotos" width="full" />
</template>

<script setup lang="ts">
import { PhotoWall } from "@coffic/cosy-ui/vue";
import { photoWallPhotos } from "./example-data";
</script>