Card

用于分组相关内容的容器组件，支持多种变体和暗黑模式。

导入

import { Card } from '@xcloud/ui-core'

示例

基础用法

Card 组件由多个子组件组成，提供灵活的内容组织方式：

import { Card } from '@xcloud/ui-core'

function Example() {
  return (
    <Card.Root>
      <Card.Header>
        <Card.Title>卡片标题</Card.Title>
        <Card.Description>卡片描述文本</Card.Description>
      </Card.Header>
      <Card.Content>
        <p>这里是卡片的主要内容。</p>
      </Card.Content>
      <Card.Footer>
        <button>操作按钮</button>
      </Card.Footer>
    </Card.Root>
  )
}

变体

Card 支持三种视觉变体：

// 默认样式 - 带阴影
<Card.Root variant="default">
  <Card.Content>默认卡片</Card.Content>
</Card.Root>

// 描边样式 - 使用边框
<Card.Root variant="outlined">
  <Card.Content>描边卡片</Card.Content>
</Card.Root>

// 高级样式 - 更明显的阴影
<Card.Root variant="elevated">
  <Card.Content>高级卡片</Card.Content>
</Card.Root>

可悬停效果

使用 hoverable 属性为卡片添加悬停交互效果：

<Card.Root hoverable onClick={() => console.log('clicked')}>
  <Card.Header>
    <Card.Title>可点击的卡片</Card.Title>
  </Card.Header>
  <Card.Content>
    <p>鼠标悬停查看效果</p>
  </Card.Content>
</Card.Root>

组件 API

Card.Root

卡片容器组件。

属性	类型	默认值	描述
variant	'default' | 'outlined' | 'elevated'	'default'	视觉样式变体
hoverable	boolean	false	是否启用悬停效果
className	string	-	附加的 CSS 类

Card.Header

卡片头部容器，通常包含标题和描述。

属性	类型	默认值	描述
className	string	-	附加的 CSS 类

Card.Title

卡片标题组件。

属性	类型	默认值	描述
className	string	-	附加的 CSS 类

Card.Description

卡片描述组件。

属性	类型	默认值	描述
className	string	-	附加的 CSS 类

Card.Content

卡片内容容器。

属性	类型	默认值	描述
className	string	-	附加的 CSS 类

Card.Footer

卡片页脚容器，通常包含操作按钮。

属性	类型	默认值	描述
className	string	-	附加的 CSS 类

暗黑模式

Card 组件完全支持暗黑模式，会自动适配主题颜色：

• 背景色自动切换
• 边框颜色自动调整
• 文本颜色自动适配

无需额外配置，只需在应用中启用暗黑模式即可。