---
nav:
  title: 组件
  order: 1
group:
  title: Data Display
  order: 1
title: PisellBaseCard
order: 1
category: atom
---

# PisellBaseCard 基础卡片

## 组件介绍

PisellBaseCard 是基础卡片容器组件，用于承载和组织任意类型的子内容。提供默认/悬停/按下/禁用四种状态的样式配置，可作为更复杂 Pro 组件的构建基础。

**核心特性**：

- 仅渲染 `children`，不展示占位（占位由低代码插槽处理）
- 支持 `style`、`hoverStyle`、`activeStyle`、`disabledStyle` 四态样式
- 可配置是否可点击（默认可点击），可点击时支持焦点与 Enter/Space 触发
- 无选中逻辑，选中态由低代码通过包裹类名等方式实现

---

## 基础用法

### 简单示例

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard>
      <div>卡片内容</div>
    </PisellBaseCard>
  );
};
```

### 可点击与 onClick

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard onClick={() => console.log('clicked')}>
      <div>点击我</div>
    </PisellBaseCard>
  );
};
```

### 不可点击（仅容器）

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard clickable={false}>
      <div>仅作为容器，无 role="button"</div>
    </PisellBaseCard>
  );
};
```

### 禁用

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard disabled>
      <div>禁用状态</div>
    </PisellBaseCard>
  );
};
```

---

## 样式与状态

### 自定义默认样式

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard
      style={{
        backgroundColor: '#f0f5ff',
        borderRadius: 16,
        padding: 24,
      }}
    >
      <div>自定义背景与圆角</div>
    </PisellBaseCard>
  );
};
```

### 悬停与按下样式

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard
      hoverStyle={{ backgroundColor: '#e6f4ff', borderColor: '#91caff' }}
      activeStyle={{ backgroundColor: '#bae0ff' }}
    >
      <div>悬停/按下时有样式变化</div>
    </PisellBaseCard>
  );
};
```

### 禁用样式

```tsx
import { PisellBaseCard } from '@pisell/materials';

export default () => {
  return (
    <PisellBaseCard disabled disabledStyle={{ opacity: 0.6 }}>
      <div>禁用时透明度降低</div>
    </PisellBaseCard>
  );
};
```

---

## API

### PisellBaseCardProps

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| children | 卡片内容 | `ReactNode` | - |
| className | 根节点类名 | `string` | - |
| style | 默认状态内联样式 | `CSSProperties` | - |
| hoverStyle | 悬停时样式覆盖 | `CSSProperties` | - |
| activeStyle | 按下时样式覆盖 | `CSSProperties` | - |
| disabledStyle | 禁用时样式覆盖 | `CSSProperties` | - |
| clickable | 是否可点击（可聚焦并触发 onClick） | `boolean` | `true` |
| disabled | 是否禁用 | `boolean` | `false` |
| onClick | 点击回调 | `(e: React.MouseEvent<HTMLDivElement>) => void` | - |

---

## 说明

- 默认视觉：背景 `#ffffff`、边框 `1px solid #eaecf0`、圆角 `12px`、内边距 `16px`、阴影与设计稿一致；可通过 `style` 覆盖。
- 可点击时根节点为 `role="button"`、`tabIndex={0}`，支持 Tab 聚焦与 Enter/Space 触发点击。
- 选中态由低代码侧控制，本组件不提供 `selected` 等 props。
