mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-24 11:08:16 +08:00
101 lines
4.6 KiB
Markdown
101 lines
4.6 KiB
Markdown
---
|
||
title: 图片卡片
|
||
icon: fa:photo
|
||
createTime: 2024/08/18 23:35:51
|
||
permalink: /guide/components/image-card/
|
||
---
|
||
|
||
## 概述
|
||
|
||
使用 `<ImageCard>` 组件在页面中显示图片卡片。
|
||
|
||
图片卡片 有别于 markdown 的 普通插入图片方式，它展示与图片相关的更多信息，包括标题、描述、作者、链接等。
|
||
适用于如 摄影作品、设计作品、宣传海报 等场景。
|
||
|
||
## Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ----------- | -------------------------- | ------- | --------------------------------------- |
|
||
| image | `string` | `''` | 必填，图片链接 |
|
||
| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) |
|
||
| description | `string` | `''` | 可选，描述 |
|
||
| author | `string` | `''` | 可选，作者 |
|
||
| href | `string` | `''` | 可选，链接 |
|
||
| date | `string \| Date \| number` | `''` | 可选，日期 |
|
||
| width | `string \| number` | `''` | 可选，宽度 |
|
||
| center | `boolean` | `false` | 可选，是否居中 |
|
||
|
||
## 示例
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
|
||
还可以放到 `<CardGrid>` 组件中。
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<CardGrid>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="..."
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="..."
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
</CardGrid>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<CardGrid>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
</CardGrid>
|
||
|
||
[查看 照片类作品示例](../../../../1.示例/照片类作品示例.md)
|