Card 卡片

用于显示分组内容的灵活卡片组件，支持各种布局。

引入

import { Card } from 'asterui'

示例

基本卡片

带标题和内容的简单卡片。

Card Title

Card content goes here. This is a basic card with a title.

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Card Title" style={{ width: '20rem' }}>
        <p>Card content goes here. This is a basic card with a title.</p>
      </Card>
    )
}

export default App

边框

带实线边框而不是阴影的卡片。

Card Title

A card with a solid border instead of a shadow.

import { Card } from 'asterui'

function App() {
  return (
      <Card variant="border" title="Card Title" style={{ width: '20rem' }}>
        <p>A card with a solid border instead of a shadow.</p>
      </Card>
    )
}

export default App

带封面图片

内容上方带封面图片的卡片。

Card with Cover

Cards can have cover images that appear above the content.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        cover={<img src="https://picsum.photos/seed/card1/400/200" alt="Cover" />}
        title="Card with Cover"
        style={{ width: '20rem' }}
      >
        <p>Cards can have cover images that appear above the content.</p>
      </Card>
    )
}

export default App

带操作按钮

底部带操作按钮的卡片。

Card with Actions

Action buttons appear at the bottom of the card.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        cover={<img src="https://picsum.photos/seed/card2/400/200" alt="Cover" />}
        title="Card with Actions"
        style={{ width: '20rem' }}
        actions={
          <>
            <Button variant="ghost" size="sm">Cancel</Button>
            <Button color="primary" size="sm">Buy Now</Button>
          </>
        }
      >
        <p>Action buttons appear at the bottom of the card.</p>
      </Card>
    )
}

export default App

变体

不同的卡片样式变体：shadow、border、dash、borderless。

Shadow

Shadow style

Border

Solid border

Dash

Dashed border

Borderless

No border

import { Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="md">
        <Card title="Shadow" variant="shadow" style={{ width: '14rem' }}>
          Shadow style
        </Card>
        <Card title="Border" variant="border" style={{ width: '14rem' }}>
          Solid border
        </Card>
        <Card title="Dash" variant="dash" style={{ width: '14rem' }}>
          Dashed border
        </Card>
        <Card title="Borderless" variant="borderless" style={{ width: '14rem' }}>
          No border
        </Card>
      </Space>
    )
}

export default App

尺寸

从 xs 到 lg 的卡片尺寸，内边距不同。

Extra Small

Compact content

Small

Small card content

Medium

Medium card content

Large

Large card content

import { Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="md" align="start">
        <Card title="Extra Small" size="xs" style={{ width: '12rem' }}>
          <p>Compact content</p>
        </Card>
        <Card title="Small" size="sm" style={{ width: '14rem' }}>
          <p>Small card content</p>
        </Card>
        <Card title="Medium" size="md" style={{ width: '16rem' }}>
          <p>Medium card content</p>
        </Card>
        <Card title="Large" size="lg" style={{ width: '18rem' }}>
          <p>Large card content</p>
        </Card>
      </Space>
    )
}

export default App

额外内容

使用 extra 属性在卡片标题中添加额外内容。

Card Title

Use the extra prop to add content in the top-right corner.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        title="Card Title"
        extra={<a href="#" className="link link-primary text-sm">More</a>}
        style={{ width: '20rem' }}
      >
        <p>Use the extra prop to add content in the top-right corner.</p>
      </Card>
    )
}

export default App

元信息布局

内置的头像、标题和描述布局。

John Doe

Software Engineer

Use avatar, title, and description for a meta layout.

import { Card, Avatar } from 'asterui'

function App() {
  return (
      <Card
        avatar={<Avatar src="/avatar-2.webp" />}
        title="John Doe"
        description="Software Engineer"
        style={{ width: '20rem' }}
      >
        <p className="mt-4">Use avatar, title, and description for a meta layout.</p>
      </Card>
    )
}

export default App

Card.Meta 组件

用于灵活定位的独立 meta 组件。

Jane Smith

Product Designer

Card.Meta can be used anywhere inside the card body.

import { Card, Avatar } from 'asterui'

function App() {
  return (
      <Card style={{ width: '20rem' }}>
        <Card.Meta
          avatar={<Avatar src="/avatar-1.webp" />}
          title="Jane Smith"
          description="Product Designer"
        />
        <p className="mt-4">Card.Meta can be used anywhere inside the card body.</p>
      </Card>
    )
}

export default App

可悬停

带悬停阴影效果的卡片。

Hoverable Card

Hover over this card to see the shadow effect.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        hoverable
        cover={<img src="https://picsum.photos/seed/card3/400/200" alt="Cover" />}
        title="Hoverable Card"
        style={{ width: '20rem' }}
      >
        <p>Hover over this card to see the shadow effect.</p>
      </Card>
    )
}

export default App

加载状态

内容加载时的骨架屏加载状态。

import { Card, Button, Space, Avatar } from 'asterui'
import { useState } from 'react'

function App() {
  const [loading, setLoading] = useState(true)
  
  return (
      <Space direction="vertical" size="md">
        <Button size="sm" onClick={() => setLoading(!loading)}>
          Toggle Loading
        </Button>
        <Card
          loading={loading}
          avatar={<Avatar />}
          title="Card Title"
          description="Card description"
          style={{ width: '20rem' }}
          actions={
            <>
              <Button variant="ghost" size="sm">Action</Button>
              <Button color="primary" size="sm">Submit</Button>
            </>
          }
        >
          <p className="mt-4">Card content that appears when not loading.</p>
        </Card>
      </Space>
    )
}

export default App

全图片

内容叠加在封面图片上。

Image Full

Content overlays on top of the image with dark gradient.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        imageFull
        cover={<img src="https://picsum.photos/seed/card4/400/250" alt="Cover" />}
        title="Image Full"
        style={{ width: '20rem' }}
        actions={<Button color="primary" size="sm">Learn More</Button>}
      >
        <p>Content overlays on top of the image with dark gradient.</p>
      </Card>
    )
}

export default App

侧边布局

图片在侧边的横向布局。

Side Layout

The cover image appears on the side instead of the top.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        side
        cover={<img src="https://picsum.photos/seed/card5/200/200" alt="Cover" className="max-w-[200px]" />}
        title="Side Layout"
        style={{ width: '28rem' }}
        actions={<Button color="primary" size="sm">Details</Button>}
      >
        <p>The cover image appears on the side instead of the top.</p>
      </Card>
    )
}

export default App

内嵌卡片

具有细微背景区别的嵌套卡片。

Outer Card

This is the outer card content.

Inner Card

Inner cards have a subtle background distinction.

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Outer Card" style={{ width: '24rem' }}>
        <p className="mb-4">This is the outer card content.</p>
        <Card type="inner" title="Inner Card">
          <p>Inner cards have a subtle background distinction.</p>
        </Card>
      </Card>
    )
}

export default App

带标签页

带标签页内容导航的卡片。

Article content here...

import { Card } from 'asterui'
import { useState } from 'react'

function App() {
  const [activeKey, setActiveKey] = useState('tab1')
  
  return (
      <Card
        tabList={[
          { key: 'tab1', label: 'Article' },
          { key: 'tab2', label: 'App' },
          { key: 'tab3', label: 'Project' },
        ]}
        activeTabKey={activeKey}
        onTabChange={setActiveKey}
        style={{ width: '24rem' }}
      >
        {activeKey === 'tab1' && <p>Article content here...</p>}
        {activeKey === 'tab2' && <p>App content here...</p>}
        {activeKey === 'tab3' && <p>Project content here...</p>}
      </Card>
    )
}

export default App

卡片网格

卡片内的网格布局，带可悬停单元格。

Card Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Card Grid" style={{ width: '28rem' }}>
        <div className="grid grid-cols-2 -mx-6 -mb-6">
          <Card.Grid hoverable>Grid Item 1</Card.Grid>
          <Card.Grid hoverable>Grid Item 2</Card.Grid>
          <Card.Grid hoverable>Grid Item 3</Card.Grid>
          <Card.Grid hoverable>Grid Item 4</Card.Grid>
        </div>
      </Card>
    )
}

export default App

API

`Card`

属性	描述	类型	默认值
`title`	卡片标题	`ReactNode`	-
`extra`	标题右上角的内容	`ReactNode`	-
`cover`	封面图片元素	`ReactNode`	-
`actions`	底部的操作按钮	`ReactNode`	-
`size`	卡片大小	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`variant`	卡片样式变体	`'shadow' \| 'border' \| 'dash' \| 'borderless'`	`'shadow'`
`type`	嵌套的内嵌卡片样式	`'inner'`	-
`side`	带侧边图片的横向布局	`boolean`	`false`
`imageFull`	内容叠加在封面图片上	`boolean`	`false`
`actionsJustify`	操作按钮对齐方式	`'start' \| 'center' \| 'end'`	`'end'`
`loading`	显示骨架屏加载状态	`boolean`	`false`
`hoverable`	添加悬停阴影效果	`boolean`	`false`
`avatar`	meta 布局的头像	`ReactNode`	-
`description`	meta 布局的描述	`ReactNode`	-
`tabList`	卡片标签页项	`CardTabItem[]`	-
`activeTabKey`	激活的标签页键（受控）	`string`	-
`defaultActiveTabKey`	默认激活的标签页键	`string`	-
`onTabChange`	标签页改变回调函数	`(key: string) => void`	-
`tabBarExtraContent`	标签页旁的额外内容	`ReactNode`	-
`children`	卡片主体内容	`ReactNode`	-
`className`	额外的 CSS 类名	`string`	-
`bodyClassName`	card-body 元素的额外 CSS 类名	`string`	-
`style`	内联样式	`CSSProperties`	-

`Card.Meta`

属性	描述	类型	默认值
`avatar`	头像或图标元素	`ReactNode`	-
`title`	标题内容	`ReactNode`	-
`description`	描述内容	`ReactNode`	-

`Card.Grid`

属性	描述	类型	默认值
`hoverable`	添加悬停效果	`boolean`	`false`
`children`	网格单元格内容	`ReactNode`	-

`CardTabItem`

属性	描述	类型	默认值
`key`	唯一标签页标识符	`string`	-
`label`	标签页标签内容	`ReactNode`	-
`disabled`	禁用标签页	`boolean`	`false`

无障碍

卡片结构使用语义化 HTML
标签页导航使用适当的 ARIA 角色和状态
加载状态提供视觉反馈
交互元素的焦点状态可见