`;
+exports[`renders components/card/demo/component-token.tsx correctly 1`] = `
+Array [
+
,
+]
+`;
+
exports[`renders components/card/demo/flexible-content.tsx correctly 1`] = `
(
+
+ ,
+ ,
+ ,
+ ]}
+ extra="More"
+ tabList={[
+ {
+ key: 'tab1',
+ label: 'tab1',
+ },
+ {
+ key: 'tab2',
+ label: 'tab2',
+ },
+ ]}
+ >
+ Card content
+ Card content
+ Card content
+
+ More} style={{ width: 300 }}>
+ Card content
+ Card content
+ Card content
+
+
+);
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
index 5d28221679..90a2747269 100644
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -25,6 +25,7 @@ A card can be used to display content related to a single subject. The content c
Inner card
With tabs
Support more content configuration
+
Component Token
## API
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index dea40535d1..36815db8da 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -26,6 +26,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
内部卡片
带页签的卡片
支持更多内容配置
+
组件 Token
## API
diff --git a/components/card/style/index.ts b/components/card/style/index.ts
index 0091da3708..405206fe0f 100644
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@@ -1,20 +1,26 @@
import type { CSSObject } from '@ant-design/cssinjs';
+import { clearFix, resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { clearFix, resetComponent, textEllipsis } from '../../style';
-export interface ComponentToken {}
+export interface ComponentToken {
+ headerBg: string;
+ headerFontSize: number;
+ headerFontSizeSM: number;
+ headerHeight: number;
+ headerHeightSM: number;
+ actionsBg: string;
+ actionsLiMargin: string;
+ tabsMarginBottom: number;
+ extraColor: string;
+}
interface CardToken extends FullToken<'Card'> {
- cardHeadHeight: number;
- cardHeadHeightSM: number;
cardShadow: string;
cardHeadPadding: number;
cardPaddingSM: number;
cardPaddingBase: number;
- cardHeadTabsMarginBottom: number;
- cardActionsLiMargin: string;
cardActionsIconSize: number;
}
@@ -22,19 +28,19 @@ interface CardToken extends FullToken<'Card'> {
// ============================== Head ==============================
const genCardHeadStyle: GenerateStyle
= (token): CSSObject => {
- const { antCls, componentCls, cardHeadHeight, cardPaddingBase, cardHeadTabsMarginBottom } = token;
+ const { antCls, componentCls, headerHeight, cardPaddingBase, tabsMarginBottom } = token;
return {
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
- minHeight: cardHeadHeight,
+ minHeight: headerHeight,
marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
padding: `0 ${cardPaddingBase}px`,
color: token.colorTextHeading,
fontWeight: token.fontWeightStrong,
- fontSize: token.fontSizeLG,
- background: 'transparent',
+ fontSize: token.headerFontSize,
+ background: token.headerBg,
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
@@ -63,7 +69,7 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => {
[`${antCls}-tabs-top`]: {
clear: 'both',
- marginBottom: cardHeadTabsMarginBottom,
+ marginBottom: tabsMarginBottom,
color: token.colorText,
fontWeight: 'normal',
fontSize: token.fontSize,
@@ -102,20 +108,26 @@ const genCardGridStyle: GenerateStyle = (token): CSSObject => {
// ============================== Actions ==============================
const genCardActionsStyle: GenerateStyle = (token): CSSObject => {
- const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, colorBorderSecondary } =
- token;
+ const {
+ componentCls,
+ iconCls,
+ actionsLiMargin,
+ cardActionsIconSize,
+ colorBorderSecondary,
+ actionsBg,
+ } = token;
return {
margin: 0,
padding: 0,
listStyle: 'none',
- background: token.colorBgContainer,
+ background: actionsBg,
borderTop: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
display: 'flex',
borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px `,
...clearFix(),
'& > li': {
- margin: cardActionsLiMargin,
+ margin: actionsLiMargin,
color: token.colorTextDescription,
textAlign: 'center',
@@ -231,6 +243,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => {
colorBorderSecondary,
boxShadowTertiary,
cardPaddingBase,
+ extraColor,
} = token;
return {
@@ -250,7 +263,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => {
[`${componentCls}-extra`]: {
// https://stackoverflow.com/a/22429853/3040605
marginInlineStart: 'auto',
- color: '',
+ color: extraColor,
fontWeight: 'normal',
fontSize: token.fontSize,
},
@@ -332,14 +345,14 @@ const genCardStyle: GenerateStyle = (token): CSSObject => {
// ============================== Size ==============================
const genCardSizeStyle: GenerateStyle = (token): CSSObject => {
- const { componentCls, cardPaddingSM, cardHeadHeightSM } = token;
+ const { componentCls, cardPaddingSM, headerHeightSM, headerFontSizeSM } = token;
return {
[`${componentCls}-small`]: {
[`> ${componentCls}-head`]: {
- minHeight: cardHeadHeightSM,
+ minHeight: headerHeightSM,
padding: `0 ${cardPaddingSM}px`,
- fontSize: token.fontSize,
+ fontSize: headerFontSizeSM,
[`> ${componentCls}-head-wrapper`]: {
[`> ${componentCls}-extra`]: {
@@ -355,7 +368,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => {
[`${componentCls}-small${componentCls}-contain-tabs`]: {
[`> ${componentCls}-head`]: {
[`${componentCls}-head-title, ${componentCls}-extra`]: {
- minHeight: cardHeadHeightSM,
+ minHeight: headerHeightSM,
paddingTop: 0,
display: 'flex',
alignItems: 'center',
@@ -366,24 +379,34 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => {
};
// ============================== Export ==============================
-export default genComponentStyleHook('Card', (token) => {
- const cardToken = mergeToken(token, {
- cardShadow: token.boxShadowCard,
- cardHeadHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
- cardHeadHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
- cardHeadPadding: token.padding,
- cardPaddingBase: token.paddingLG,
- cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
- cardActionsLiMargin: `${token.paddingSM}px 0`,
- cardActionsIconSize: token.fontSize,
- cardPaddingSM: 12, // Fixed padding.
- });
-
- return [
- // Style
- genCardStyle(cardToken),
-
- // Size
- genCardSizeStyle(cardToken),
- ];
-});
+export default genComponentStyleHook(
+ 'Card',
+ (token) => {
+ const cardToken = mergeToken(token, {
+ cardShadow: token.boxShadowCard,
+ cardHeadPadding: token.padding,
+ cardPaddingBase: token.paddingLG,
+ cardActionsIconSize: token.fontSize,
+ cardPaddingSM: 12, // Fixed padding.
+ });
+
+ return [
+ // Style
+ genCardStyle(cardToken),
+
+ // Size
+ genCardSizeStyle(cardToken),
+ ];
+ },
+ (token) => ({
+ headerBg: 'transparent',
+ headerFontSize: token.fontSizeLG,
+ headerFontSizeSM: token.fontSize,
+ headerHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
+ headerHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
+ actionsBg: token.colorBgContainer,
+ actionsLiMargin: `${token.paddingSM}px 0`,
+ tabsMarginBottom: -token.padding - token.lineWidth,
+ extraColor: token.colorText,
+ }),
+);
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 32c3aa4c05..9cbb150f15 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -73,7 +73,30 @@ This document contains the correspondence between all the less variables related
| `@calendar-full-bg` | `fullBg` | - |
| `@calendar-full-panel-bg` | `fullPanelBg` | - |
-
+### Card
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@card-head-color` | `colorTextHeading` | Global Token |
+| `@card-head-background` | `headerBg` | - |
+| `@card-head-font-size` | `headerFontSize` | - |
+| `@card-head-font-size-sm` | `headerFontSizeSM` | - |
+| `@card-head-padding` | - | Deprecated |
+| `@card-head-padding-sm` | - | Deprecated |
+| `@card-head-height` | `headerHeight` | - |
+| `@card-head-height-sm` | `headerHeightSM` | - |
+| `@card-inner-head-padding` | - | Deprecated |
+| `@card-padding-base` | `cardPaddingBase` | - |
+| `@card-padding-base-sm` | `cardPaddingBaseSm` | - |
+| `@card-actions-background` | `actionsBackground` | - |
+| `@card-actions-li-margin` | `actionsLiMargin` | - |
+| `@card-skeleton-bg` | - | Deprecated in favor of internal Skeleton |
+| `@card-background` | `colorBgContainer` | Global Token |
+| `@card-shadow` | - | Could be modified by `className` or `style` directly |
+| `@card-radius` | `borderRadiusLG` | Global Token |
+| `@card-head-tabs-margin-bottom` | `tabsMarginBottom` | - |
+| `@card-head-extra-color` | `extraColor` | - |
## Carousel
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 37dd4dc6c5..92de0b7ae6 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -73,9 +73,32 @@ title: Less 变量迁移 Design Token
| `@calendar-full-bg` | `fullBg` | - |
| `@calendar-full-panel-bg` | `fullPanelBg` | - |
-
+### Card 卡片
-## Carousel 走马灯
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@card-head-color` | `colorTextHeading` | 全局 Token |
+| `@card-head-background` | `headerBg` | - |
+| `@card-head-font-size` | `headerFontSize` | - |
+| `@card-head-font-size-sm` | `headerFontSizeSM` | - |
+| `@card-head-padding` | - | 已废弃 |
+| `@card-head-padding-sm` | - | 已废弃 |
+| `@card-head-height` | `headerHeight` | - |
+| `@card-head-height-sm` | `headerHeightSM` | - |
+| `@card-inner-head-padding` | - | 已废弃 |
+| `@card-padding-base` | `cardPaddingBase` | - |
+| `@card-padding-base-sm` | `cardPaddingBaseSm` | - |
+| `@card-actions-background` | `actionsBackground` | - |
+| `@card-actions-li-margin` | `actionsLiMargin` | - |
+| `@card-skeleton-bg` | - | 已废弃，已改为内置 Skeleton 组件 |
+| `@card-background` | `colorBgContainer` | 全局 Token |
+| `@card-shadow` | - | 可由 `className` 或者 `style` 直接修改 |
+| `@card-radius` | `borderRadiusLG` | 全局 Token |
+| `@card-head-tabs-margin-bottom` | `tabsMarginBottom` | - |
+| `@card-head-extra-color` | `extraColor` | - |
+
+### Carousel 走马灯
| Less 变量 | Component Token | 备注 |