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

# TextCard 设计文档

## 组件概述

- 组件名称（英文）： Text Card
- 组件编号： pcp_dd_textCard_V1.0
- 组件类型： Pro Components
- 组件分类：Data Display
- 简介: 文本卡片组件，用于展示带图标、文本、标签和角标的信息项，常用于 Tab 项、列表项等。

## 2. 版本

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

## 3. 组件设计目的

1. 作为 Tabs 标签页的项。
2. 作为列表中的项。
3. 作为导航菜单项。

## 适用场景

- 电商平台: 商品分类标签
- 后台管理系统: 功能模块入口
- 内容应用: 文章分类标签

## UI 设计

文本卡片组件包含以下区域：

- 前置图标（可选）
- 主文本（必选）
- 后置标签（可选）
- 后置图标（可选）
- 角标（可选，支持红点、数字和文本）

Analyze the structure of this selection, and make a plan for implementation.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12510-9674&m=dev

- 此组件包含六种样式和三种大小，以及四种状态

- 三种大小（通用）： small, default, large
- 四种状态 （通用）： disabled default hover active
- 六种样式（可选）：

  - 样式 1
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12510-12433&m=dev

  - 样式 2
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12511-13405&m=dev

  - 样式 3
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12511-13490&m=dev

  - 样式 4
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12511-13573&m=dev

  - 样式 5
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12511-13649&m=dev

  - 样式 6
    Implement this Figma design.
    @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12511-13721&m=dev

## 自适应规则

- 宽度默认为跟随内容撑满，有最大宽度 400px，超过时内容文本区域显示省略
- 当更改宽度为撑满父容器时，宽度最小为 28px

## 配置项

### 7.1 样式自定义

- 可以切换选择样式一到样式六
- Card 的背景、圆角、边框、阴影、padding、gap 都可以在默认的基础上去的自定义
- 内容的文本可以自定义大小、粗细、颜色、显示行数、宽度
- card 的宽度默认为内容撑满也可更改为固定宽度、撑满父容器
- 内容区域的 icon 可以更改大小、颜色
- 可以更改角标的位置和大小样式

### 7.2 功能配置

- 是否可点击
- 是否显示前后 icon
- 是否显示 tag 标签
- 是否开启角标，角标可切换数字、点、文本
- 是否为选中状态
- 可开启前后插槽
