---
title: 设计文档
order: 2
category: pro
---

# MultilevelCard 设计文档

## 组件概述

- 组件名称（英文）：Multilevel Card
- 组件编号： pcp_dd_multilevelCard_V1.0
- 组件类型： Pro Components
- 组件分类：Data Display
- 依赖组件：基于 Graphic Text Card 和 Text Card 等组件封装，在这两个组件的基础上确定了内容以及展示的样式，并且支持展开子集
- 简介: 多层级卡片组件，支持点击展开，展示分层级数据，适用于分类导航、菜单选择、多级筛选等场景

## 2. 版本

- 版本： 1.0
- 更新简介: 首次发布

## 3. 组件设计目的

1. 点击或者 hover 展开子集

## 适用场景

- 多级分类导航（如商品分类、内容分类）
- 级联选择器
- 树形菜单展示
- 多级筛选条件
- 组织架构展示

## UI 设计

本身并不包括 UI 样式，只是对 Card 组件的封装，所以需要配合 Card 组件一起使用。
整体分两部分：

多层级卡片组件包含以下核心区域：

- 主卡片区域：传入任意 Card 组件，作为主卡片区域
- 次级面板区域：当 Card 处于 active 状态时，展示次级面板区域，次级面板内容为外界透传的 ReactNode

## 配置项

### 样式自定义

- 次级面板区域的 style 样式
- 次级面板区域的宽度默认为撑满父容器，也可更改为固定宽度、内容撑满
- 可以切换次级面板区域的展示位置，默认在当前容器内展示， 也可以指定任意一个 dom 节点作为次级面板的容器。
- 次级面板区域的是否展开，默认通过 active 属性控制展开状态。
