Neumorphism UI

Image Card

用于将图片与说明组合成一项独立内容。

预览

工作区封面

为工作区封面提供替代文字与简短的设计系统说明。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/image-card

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

提供真实图片地址和有意义的 alt，需要上下文时加入 caption。图片传输和优化由应用负责。

import { ImageCard } from "@/components/ui/image-card";

export default function Example() {
  return <ImageCard src="/workspace.jpg" alt="A shared workspace" caption="Our design studio" />;
}

API 参考

保留原生 img 与 figure/figcaption 语义，并用新拟态表面组合图片和说明。图片加载与优化由应用或框架负责。

组件属性类型默认值说明
ImageCardsrc必填string—要显示的图片 URL。
ImageCardalt必填string—说明图片用途的替代文本。
ImageCardcaptionReactNode—可选的 figcaption 内容。
ImageCardimageClassNamestring—扩展默认的宽高比和 object-fit 样式。
ImageCardfigure propsReact.ComponentProps<"figure">—向 figure 传递标准 HTML 属性。

无障碍

  • 01

    信息图片应提供有意义的 alt，装饰图片使用空 alt。

  • 02

    caption 用于与图片相关的说明，不应替代无关的操作或导航。

  • 03

    需要图片优化组件的框架可以直接修改已安装源码并替换原生 img。