PhotoWall

简介

PhotoWall 组件用于创建照片墙布局，支持多种布局模式和交互效果。可以展示图片、渐变背景、文字内容等，创造出丰富的视觉效果。

组件特性：

采用不规则布局设计，创建动态的视觉层次
所有图片强制显示为正方形，确保最佳展示效果
支持多种卡片尺寸（xs、sm、md、lg、xl）
支持渐变背景和文字内容
支持悬停和点击效果
响应式设计，适配不同屏幕尺寸
支持自定义样式和动画

案例

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



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

容器背景色，支持多种预设的语义化背景色。

精彩的回忆

记录每一个美好瞬间

点击查看

---



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

是否显示边框，设置为 true 时显示容器边框。

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



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

是否居中显示，设置为 true 时容器居中显示。

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



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

是否启用点击效果，设置为 true 时卡片可点击。

点击查看

---



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

卡片间距，支持 none、xs、sm、md、lg、xl 六种间距。

点击查看

---



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

是否启用悬停效果，设置为 true 时显示悬停动画。

点击查看

---



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

容器内边距，支持 none、sm、md、lg、xl、2xl、3xl、4xl 八种内边距。

点击查看

---



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

照片卡片数据数组，包含图片信息、标题、样式等。

精彩的回忆

记录每一个美好瞬间

点击查看

精彩的回忆

记录每一个美好瞬间

---



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

卡片圆角大小，支持 none、sm、md、lg、xl、2xl、3xl、full 八种圆角。

点击查看

---



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

中心副标题，与 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

中心标题，在图片墙中心显示标题文字，带有遮罩效果确保可读性。

相册

美好回忆

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

容器宽度，支持多种预设尺寸。

点击查看

---



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>