CardGroup
卡片组容器:基于 Space 成组排布多个 Card。普通型下 spacing 控制等间距(默认 16);type=grid 网格型下卡片去圆角、以 -1px 负边距拼接边框,spacing 被忽略。
如何引入
import { CardGroup } from '@chenzy-design/svelte';API 参考
CardGroup
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
spacing | 卡片间距;number 统一,[x,y] 分别指定水平/垂直(网格型下忽略) | number | number[] | 16 |
type | 网格型,将覆盖 spacing | 'grid' | undefined |
class | 根节点自定义类名 | string | undefined |
style | 根节点自定义内联样式 | string | undefined |
children | 子 Card | Snippet | undefined |
Slots
| 名称 | 说明 |
|---|---|
children | 子 Card |
Accessibility
- 对齐 Semi:CardGroup 是纯 Space 包裹,根节点不加 role/aria-label;卡片本身 a11y 由 Card 提供。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-cardgroup-card-margin | var(--cd-spacing-cardgroup-card-margin) | 网格型相邻卡片边框拼接负外边距(组件消费) |
--cd-cardgroup-spacing | var(--cd-spacing-card-margin) | CardGroup 默认卡片间距(组件消费;Semi 默认 16 = spacing-base-loose) |
--cd-spacing-cardgroup-card-margin | -1px | 网格卡片组相邻卡片边框拼接负外边距(Semi $spacing-cardGroup_card-margin) |