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根节点自定义类名stringundefined
style根节点自定义内联样式stringundefined
children子 CardSnippetundefined

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)