卡片组件

亮色

暗色

卡片组件是一个灵活且多功能的 UI 元素，采用复合组件模式设计。它支持垂直和水平布局，可选的图片或图标，以及结构化的内容区域。该组件提供简洁、现代的界面，用于展示有序信息。

在线预览链接

组件代码链接

先决条件

确保在项目中已安装 @neo4j-ndl 库，以使用此 Card 组件。

使用

在应用中使用 Card 组件，请按照以下步骤操作

导入组件及所需资源

import Card from './path/to/Card';
import testImg from './assets/cardImg.png';
import { Button, Typography } from '@neo4j-ndl/react';
import { AcademicCapIconOutline, RocketLaunchIconOutline } from '@neo4j-ndl/react/icons';

使用复合组件模式构建卡片

// Vertical card with image and full content
<Card layout='vertical' imageSrc={testImg} imageSize='full' className='h-auto w-96'>
  <Card.Header>Header text</Card.Header>
  <Card.Subheader>Subtitle or description</Card.Subheader>
  <Card.Content>
    <p>Some description about relatively important things.</p>
    <ul className='list-disc list-inside'>
      <li>Key information item 1</li>
      <li>Key information item 2</li>
      <li>Key information item 3</li>
    </ul>
    <div className='flex flex-row min-w-full justify-between'>
      <Button size='small' color='danger' className='w-2/5 mx-2.5'>
        <Typography variant='body-small'>Cancel</Typography>
      </Button>
      <Button size='small' color='primary' className='w-2/5 mx-2.5'>
        <Typography variant='body-small'>Confirm</Typography>
      </Button>
    </div>
  </Card.Content>
</Card>

// Horizontal card with icon
<Card layout='horizontal' iconSystem={AcademicCapIconOutline}>
  <Card.Header>Header text</Card.Header>
  <Card.Content>
    <p>Content for horizontal layout card.</p>
  </Card.Content>
</Card>

组件属性 (Props)

主 Card 组件接受以下属性

名称描述必填

名称	描述	必填
`layout`	布局方向：`'vertical'` 或 `'horizontal'`	是
`imageSrc`	卡片中要显示的图片路径	否
`imageSize`	图片大小：`'full'` 或 `'small'`（默认：`'small'`）	否
`iconSystem`	来自 `@neo4j-ndl/react/icons` 的图标 React 组件	否
`children`	子组件（Card.Header、Card.Subheader、Card.Content）	是
`className`	用于样式的额外 CSS 类	否

layout

布局方向：'vertical' 或 'horizontal'

是

imageSrc

卡片中要显示的图片路径

否

imageSize

图片大小：'full' 或 'small'（默认：'small'）

否

iconSystem

来自 @neo4j-ndl/react/icons 的图标 React 组件

否

children

子组件（Card.Header、Card.Subheader、Card.Content）

是

className

用于样式的额外 CSS 类

否

复合组件

Card 组件采用复合组件模式，包含三个子组件

Card.Header

使用 Typography variant='h5' 显示卡片的主标题。

<Card.Header>Your Card Title</Card.Header>

Card.Subheader

使用 Typography variant='subheading-large' 显示副标题或次要信息。

<Card.Subheader>Subtitle or description</Card.Subheader>

Card.Content

使用 Typography variant='body-small' 并采用 flex 布局，包含卡片的主要内容。

<Card.Content>
  <p>Your main content here...</p>
  <ul>...</ul>
  <div>Buttons or other elements</div>
</Card.Content>

关键组件

布局系统

Card 组件支持两种布局方向，可自动调整内容流向

垂直布局：内容垂直堆叠，图片/图标位于顶部

<Card layout='vertical' imageSrc={testImg} imageSize='full'>
  {/* Content flows vertically */}
</Card>

水平布局：内容水平排列，图片/图标位于左侧

<Card layout='horizontal' imageSrc={testImg} imageSize='full' className='h-72'>
  {/* Content flows horizontally */}
</Card>

图片与图标支持

组件支持图片或系统图标二选一，不能同时使用两者

图片支持：- imageSize='full'：全宽/全高图片，可适配布局 - imageSize='small'：16x16 小图片，用于最小化展示

// Full-size image
<Card layout='vertical' imageSrc={testImg} imageSize='full'>
  {/* Content */}
</Card>

// Small image
<Card layout='horizontal' imageSrc={testImg} imageSize='small'>
  {/* Content */}
</Card>

图标支持：使用 Neo4j Design Language 图标

<Card layout='vertical' iconSystem={RocketLaunchIconOutline}>
  {/* Content */}
</Card>

复合组件架构

Card 使用 React 的复合组件模式，允许灵活的内容组合

const Card: React.FC<CardProps> & {
  Header: React.FC<CardHeaderProps>;
  Subheader: React.FC<CardSubheaderProps>;
  Content: React.FC<CardContentProps>;
} = ({ layout, imageSrc, imageSize, iconSystem, children, className }) => {
  // Component implementation
};

Card.Header = Header;
Card.Subheader = Subheader;
Card.Content = Content;

响应式设计

组件会自动适配不同的布局

水平布局：图片占 1/3 宽度，内容占 2/3 宽度
垂直布局：图片占满宽度，内容在下方堆叠
灵活的样式：支持自定义 className 进行额外样式设置

// Grid layout for multiple cards
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
  {cards.map((card, index) => (
    <Card key={index} layout='vertical' className='h-auto w-96'>
      {/* Card content */}
    </Card>
  ))}
</div>

内容灵活性

每个复合组件提供语义化结构

Header（标题）：使用 h5 排版的主标题
Subheader（副标题）：使用 subheading-large 排版的次要信息
Content（内容）：支持任何 React 内容的灵活容器（文本、列表、按钮等）

<Card.Content>
  <p>Text content</p>
  <ul className='list-disc list-inside'>
    <li>List items</li>
  </ul>
  <div className='flex justify-between'>
    <Button>Action 1</Button>
    <Button>Action 2</Button>
  </div>
</Card.Content>