ImageCard 图像卡片

拍立得相框式的图像展示卡片：图片区以固定宽高比锁定几何，底部标签栏以主题色族实底 + 粗黑线隔断呈现工控档案标注。悬浮时整卡上浮（硬投影无模糊），遵循库统一交互语言。

预览

Preview

基础拍立得相框

Field Record 001

悬浮时整卡上浮，投影保持硬边无模糊。

宽高比与底栏色族

Aspect 4:3

Aspect Video

Aspect Square

自定义底栏插槽

Archive / 1998[ CONFIDENTIAL ]

安装

pnpm dlx brutx-vue@latest add image-card

用法

基础用法

<script setup>
import { ImageCard } from 'brutx-ui-vue'
</script>

<template>
    <ImageCard
        class="max-w-xs"
        src="/images/field-record.jpg"
        alt="外勤档案照片"
        title="Field Record 001"
        description="悬浮时整卡上浮，投影保持硬边。"
    />
</template>

宽高比与底栏色族

aspect 锁定图片区几何，accent 决定底栏色族。

<template>
    <ImageCard
        src="/images/archive.jpg"
        alt="归档资料"
        aspect="square"
        accent="destructive"
        title="Aspect Square"
    />
</template>

自定义底栏插槽

默认插槽替换标题/描述结构，可自由排布底栏内容。

<template>
    <ImageCard src="/images/archive.jpg" alt="归档资料">
        <div class="flex items-center justify-between font-mono text-xs font-bold uppercase">
            <span>Archive / 1998</span>
            <span>[ CONFIDENTIAL ]</span>
        </div>
    </ImageCard>
</template>

API 参考

ImageCard — 属性

名称	类型	默认值	说明
src 必填	string	—	图片元素使用的资源地址。
详情 声明类型 string 默认值详情 未声明默认值 — 来源 ImageCard.vue:12 packages/ui/src/components/image-card/ImageCard.vue
alt	string | undefined	""	图片替代文本；空字符串表示图片仅作装饰。
详情 声明类型 string | undefined 默认值详情 声明 '' 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 "" 来源 ImageCard.vue:14 packages/ui/src/components/image-card/ImageCard.vue
aspect	ImageCardAspect | undefined	undefined	设置图片区域的宽高比；video 对应 16:9，square 为正方形，4/3 为 4:3。
详情 声明类型 ImageCardAspect | undefined 字面量 "4/3" "square" "video" 关联类型 ImageCardAspect 类型定义 — ImageCardAspect type ImageCardAspect = '4/3' | 'video' | 'square' 默认值详情 声明 undefined 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 undefined 来源 ImageCard.vue:16 packages/ui/src/components/image-card/ImageCard.vue
accent	ImageCardAccent | undefined	undefined	设置底栏使用的主题色族。
详情 声明类型 ImageCardAccent | undefined 字面量 "accent" "destructive" "info" "muted" "primary" "secondary" "success" 关联类型 ImageCardAccent 类型定义 — ImageCardAccent type ImageCardAccent = 'primary' | 'secondary' | 'accent' | 'destructive' | 'success' | 'info' | 'muted' 默认值详情 声明 undefined 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 undefined 来源 ImageCard.vue:18 packages/ui/src/components/image-card/ImageCard.vue
title	string | undefined	undefined	显示在底栏中的标题文本。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 undefined 来源 ImageCard.vue:20 packages/ui/src/components/image-card/ImageCard.vue
description	string | undefined	undefined	显示在底栏标题附近的描述文本。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 undefined 来源 ImageCard.vue:22 packages/ui/src/components/image-card/ImageCard.vue
class 可空	ClassValue	undefined	追加到图片卡片根元素的自定义 CSS 类值。
详情 声明类型 ClassValue 字面量 false null true 默认值详情 声明 undefined 来源: packages/ui/src/components/image-card/ImageCard.vue 解析值 undefined 来源 ImageCard.vue:24 packages/ui/src/components/image-card/ImageCard.vue

ImageCard — 插槽

名称	签名或类型	说明
#default	{}	替换默认底栏内容；未提供标题、描述和插槽内容时，组件省略底栏并只显示图片。
详情 声明类型 {} 来源 ImageCard.vue packages/ui/src/components/image-card/ImageCard.vue

无底栏形态

title、description 均未提供且无默认插槽内容时不渲染 <figcaption>，组件退化为纯图片相框。

可访问性

• 图片替代文本：信息性图片必须提供 alt；纯装饰图传空字符串使读屏跳过。
• 语义结构：根元素为 <figure>、底栏为 <figcaption>，图片与说明保持原生语义关联。
• 动效降级：悬浮上浮过渡为唯一动效，遵循全局 reduced-motion 策略。