图片卡片
858字约3分钟
2024-08-18
概述
使用 <ImageCard>
组件在页面中显示图片卡片。
图片卡片 有别于 markdown 的 普通插入图片方式,它展示与图片相关的更多信息,包括标题、描述、作者、链接等。 适用于如 摄影作品、设计作品、宣传海报 等场景。
Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
image | string | '' | 必填,图片链接 |
title | string | '' | 可选,标题 (展示其它信息需要依赖此属性) |
description | string | '' | 可选,描述 |
author | string | '' | 可选,作者 |
href | string | '' | 可选,链接 |
date | string | Date | number | '' | 可选,日期 |
示例
输入:
<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"
/>
输出:
阿尔凡齐纳灯塔,阿尔加维,葡萄牙
Andreas Kunz | 2024年8月16日
今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年,照耀着大海,帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地,同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近,那么本周末就是拜访灯塔的最佳时机。
还可以放到 <CardGrid>
组件中。
输入:
<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>
输出:
阿尔凡齐纳灯塔,阿尔加维,葡萄牙
Andreas Kunz | 2024年8月16日
今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年,照耀着大海,帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地,同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近,那么本周末就是拜访灯塔的最佳时机。
阿尔凡齐纳灯塔,阿尔加维,葡萄牙
Andreas Kunz | 2024年8月16日
今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年,照耀着大海,帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地,同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近,那么本周末就是拜访灯塔的最佳时机。