代码演示
如何引入
import { Card, CardGroup } from '@chenzy-design/svelte';基础卡片
基础卡片包含标题、内容等部分。
Semi Design
Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
简洁卡片
卡片可以只设置内容区域。
Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。
封面
可以使用 cover 属性设置封面。
边线和外边框
可以使用 bordered 设置卡片是否有外边框，默认为 true 。同时，也可以使用 headerLine 设置内容区和标题区是否有边线， footerLine 设置内容区和页尾区是否有边线。
Semi Design
Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
阴影
可以使用 shadows 设置显示阴影的时机，可选值为: hover（hover 时显示阴影）、always（始终显示阴影），如果不设置该属性则没有阴影。
更灵活的内容展示
可以利用 Card.Meta 支持更灵活的内容，允许设置 title、avatar、description。
内部卡片
卡片内部可以嵌套其他卡片。
栅格卡片
在系统概览页面常常和栅格进行配合。
Card Title
Card Content
Card Title
Card Content
Card Title
Card Content
Card Title
Card Content
Card Title
Card Content
内置预加载
可以使用 Card 的 loading 属性来设置卡片内容区是否显示占位元素，当它为 true 时将显示占位元素，反之则不显示。
更丰富的预加载效果
Card 自带的 loading 属性只能设置内容区的预加载效果，如果你想要设置其他部分的预加载，或者自定义更丰富的预加载效果，你可以结合 Skeleton 组件来实现。
带页签的卡片
可以结合 Tabs 组件，实现带页签的卡片。
Card title
卡片操作区
actions 以 12px 的水平间距展示于内容区底部；本库以 snippet 承载（对齐 Semi 的 ReactNode 数组），snippet 内的多个子元素逐项排布。
卡片组
CardGroup 中的卡片将呈现为等间距排列，利用 spacing 属性可以设置卡片间距大小。
网格型卡片组
使用 CardGroup 的 type 属性，可以将卡片组设置为网格型。
API 参考
Card
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| actions | 卡片操作组，位于卡片内容区的底部，snippet 内多个子元素以 12px 水平间距排布 | Snippet | - |
| aria-label | 根节点 aria-label，表述该 Card 的作用 | string | - |
| bodyStyle | 卡片内容区内联样式 | string | - |
| bordered | 是否设置卡片的外边框 | boolean | true |
| class | 卡片的样式类名 | string | - |
| cover | 卡片封面 | Snippet | - |
| headerExtraContent | 卡片标题右侧的额外内容 | Snippet | - |
| footer | 自定义卡片页脚 | Snippet | - |
| footerLine | 卡片页脚区与内容区是否有边线 | boolean | false |
| footerStyle | 卡片页脚区内联样式 | string | - |
| header | 自定义卡片头部，若传入将覆盖 title 和 headerExtraContent | Snippet | - |
| headerLine | 卡片标题区与内容区是否有边线 | boolean | true |
| headerStyle | 卡片标题区内联样式 | string | - |
| loading | 是否设置加载时的占位 | boolean | false |
| shadows | 设置显示阴影的时机，如果不设置该属性则没有阴影，可选值：hover、always | string | - |
| style | 卡片内联样式 | string | - |
| title | 卡片标题 | string | Snippet | - |
CardGroup
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| class | 卡片组的样式类名 | string | - |
| spacing | 间距尺寸，支持数值或数组，数组形如: [水平间距, 垂直间距] | number | number[] | 16 |
| style | 卡片组的内联样式 | string | - |
| type | 可以把卡片组设置为网格型，设置完该属性后将覆盖 spacing 属性，可选值：grid | string | - |
Card.Meta
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| avatar | 头像 | Snippet | - |
| class | 类名 | string | - |
| description | 描述 | string | Snippet | - |
| style | 内联样式 | string | - |
| title | 标题 | string | Snippet | - |
Accessibility
- Card 支持传入
aria-label来表示该 Card 作用 - Card loading 时，将开启
aria-busy - Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南
文案规范
- 卡片标题
- 卡片标题应具有信息描述性，聚焦最重要的信息
- 尽量将标题限制在 1 个短语或句段中
- 卡片标题应句子大小写书写
- 不要以标点符号结尾（除了问号）
- 正文
- 可操作的：使用祈使句而不是”你可以”来描述正文，可以更好的告诉用户可以做什么
| ✅ 推荐用法 | ❌ 不推荐用法 |
|---|---|
| Get order progress for details | You can get order progress for details |
- 总是优先说最重要的信息
- 使用 “Need to”而不是”must”
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-card-bg | var(--cd-color-card-bg-default) | 卡片根背景（组件消费） |
| --cd-card-body-color | var(--cd-color-card-body-text) | body 正文文字（组件消费） |
| --cd-card-border-color | var(--cd-color-card-border) | 卡片外框/头尾分隔线颜色（组件消费） |
| --cd-card-desc-color | var(--cd-color-card-description-text) | Meta 描述文字（组件消费） |
| --cd-card-extra-color | var(--cd-color-card-extra-text) | header 右侧 extra 文字（组件消费） |
| --cd-card-title-color | var(--cd-color-card-title-text) | Meta 标题文字（组件消费） |
| --cd-color-card-bg-default | var(--cd-color-bg-0) | 卡片背景颜色（Semi $color-card-bg-default） |
| --cd-color-card-body-text | var(--cd-color-text-1) | 卡片正文文字颜色（Semi $color-card_body-text） |
| --cd-color-card-border | var(--cd-color-border) | 卡片描边颜色（Semi $color-card-border） |
| --cd-color-card-description-text | var(--cd-color-text-2) | 卡片描述文字颜色（Semi $color-card_description-text） |
显示第 1 条-第 10 条，共 12 条
- 1
- 2