# card-layout LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/card-layout` 的使用方式。

## 模块定位

卡片结构布局，替代 SimpleLayout 组件

## 导入方式

```ts
import { CardLayout } from '@flatbiz/antd/card-layout';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `CardLayout` - 卡片结构布局，替代 SimpleLayout 组件
- `CardLayoutProps`
- `* from ./card-layout.jsx`

## 依赖的 antd 能力

`Space`

## Props / 配置要点

### CardLayoutProps

- `desc`（可选）：: string | string[] | ReactElement | ReactElement[]；描述
- `title`（可选）：: string | ReactElement；标题
- `subTitle`（可选）：: string | ReactElement；子标题，在标题右侧
- `layoutType`（可选）：: 'layer' | 'tight'；layoutType 布局类型
- `titleLeftLine`（可选）：: boolean；隐藏标题左侧符号
- `titleStyle`（可选）：: CSSProperties
- `titleContentStyle`（可选）：: CSSProperties
- `subTitleStyle`（可选）：: CSSProperties
- `titleExtraStyle`（可选）：: CSSProperties
- `contentStyle`（可选）：: CSSProperties
- `padding`（可选）：: CSSProperties['padding']；优先级大于 style padding
- `width`（可选）：: CSSProperties['width']；优先级大于 style width
- `height`（可选）：: CSSProperties['height']；优先级大于 style height
- `titleExtra`（可选）：: string | ReactElement；标题右侧布局
- `titleFixed`（可选）：: boolean；当存在滚动条时，标题固定，滚动区域为内部部分
- `size`（可选）：: 'default' | 'small'；间距尺寸 1. default = 15 2. small = 8
- `onClick`（可选）：: (event) => void
- `hidden`（可选）：: boolean
- `children`（可选）：: ReactNode
- `className`（可选）：: string
- `style`（可选）：: CSSProperties

## 使用规则与行为

- 描述
- 标题
- 子标题，在标题右侧
- layoutType 布局类型
- 隐藏标题左侧符号
- 优先级大于 style padding
- 优先级大于 style width
- 优先级大于 style height
- 标题右侧布局
- 当存在滚动条时，标题固定，滚动区域为内部部分

## 基础示例

```tsx
import { CardLayout, type CardLayoutProps } from '@flatbiz/antd/card-layout';

const props: CardLayoutProps = {
  // 按业务传入必要参数
};

<CardLayout {...props} />;
```

## 源码索引

- `src/card-layout/card-layout.tsx`
- `src/card-layout/index.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/card-layout` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。