ant-design/migrate-less-variables.zh-CN.md at 1c1ebbe36d992494ec3ef37bb0c112833af35003

mirror of https://github.com/ant-design/ant-design.git synced 2024-12-03 00:09:39 +08:00

* feat: Divider Component Token

* feat: 更改token命名规范

* feat: 增加token demo

* test: Update Test Snapshots

* feat: token

* chore: update

* fix: lint

* chore: lint

* chore: update snapshot

---------

Co-authored-by: MadCcc <1075746765@qq.com>

2023-08-11 13:43:44 +08:00

28 KiB

Raw Blame History

group

order

title

title
迁移

从 Less 变量到 Design Token

本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。

如何配置 Component Token

通过 ConfigProvider 的 theme 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token

import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
        Checkbox: {
          colorPrimary: '#ff4d4f',
        },
      },
    }}
  >
    <Radio>Radio</Radio>
    <Checkbox>Checkbox</Checkbox>
  </ConfigProvider>
);

export default App;

组件变量

Anchor 锚点

Less 变量	Component Token	备注
`@anchor-bg`	-	可以由 `className` 或 `style` 直接修改
`@anchor-border-color`	`colorSplit`	全局 Token
`@anchor-link-top`	`linkPaddingBlock`	-
`@anchor-link-left`	`linkPaddingInlineStart`	-
`@anchor-link-padding`	-	`${linkPaddingBlock}px ${linkPaddingInlineStart}px`

Avatar 头像

less 变量	Component Token	备注
`@avatar-size-base`	`containerSize`	-
`@avatar-size-lg`	`containerSizeLG`	-
`@avatar-size-sm`	`containerSizeSM`	-
`@avatar-font-size-base`	`textFontSize`	-
`@avatar-font-size-lg`	`textFontSizeLG`	-
`@avatar-font-size-sm`	`textFontSizeSM`	-
`@avatar-bg`	-	可由 `className` 或 `style` 直接覆盖
`@avatar-color`	`colorTextLightSolid`	全局 Token
`@avatar-border-radius`	`borderRadius`	全局 Token
`@avatar-group-overlapping`	`groupOverlapping`	-
`@avatar-group-space`	`groupSpace`	-
`@avatar-group-border-color`	`colorBorderBg`	全局 Token

Less 变量	Component Token	备注
`@breadcrumb-base-color`	`itemColor`	-
`@breadcrumb-last-item-color`	`lastItemColor`	-
`@breadcrumb-font-size`	`fontSize`	全局 Token
`@breadcrumb-icon-font-size`	`iconFontSize`	-
`@breadcrumb-link-color`	`linkColor`	-
`@breadcrumb-link-color-hover`	`linkHoverColor`	-
`@breadcrumb-separator-color`	`separatorColor`	-
`@breadcrumb-separator-margin`	`separatorMargin`	-

Button 按钮

Less 变量	Component Token	备注
`@btn-font-weight`	`fontWeight`	-
`@btn-border-radius-base`	`borderRadius`	全局 Token
`@btn-border-radius-sm`	`borderRadisuSM`	全局 Token
`@btn-border-width`	`lineWidth`	全局 Token
`@btn-border-style`	`lineStyle`	全局 Token
`@btn-shadow`	`defaultShadow`	-
`@btn-primary-shadow`	`primaryShadow`	-
`@btn-text-shadow`	-	已废弃，v5 中不再有 `text-shadow`
`@btn-primary-color`	`primaryColor`	-
`@btn-primary-bg`	`colorPrimary`	全局 Token
`@btn-default-color`	`defaultColor`	-
`@btn-default-bg`	`defaultBg`	-
`@btn-default-border`	`defaultBorderColor`	-
`@btn-danger-color`	`dangerColor`	-
`@btn-danger-bg`	`colorError`	全局 Token
`@btn-danger-border`	`colorError`	全局 Token
`@btn-disable-color`	`colorTextDisabled`	全局 Token
`@btn-disable-bg`	`colorBgContainerDisabled`	全局 Token
`@btn-disable-border`	`borderColorDisabled`	-
`@btn-default-ghost-color`	`defaultGhostColor`	-
`@btn-default-ghost-bg`	`ghostBg`	-
`@btn-default-ghost-border`	`defaultGhostBorderColor`	-
`@btn-font-size-lg`	`fontSizeLG`	全局 Token
`@btn-font-size-sm`	`fontSizeSM`	全局 Token
`@btn-padding-horizontal-base`	`paddingInline`	-
`@btn-padding-horizontal-lg`	`paddingInlineLG`	-
`@btn-padding-horizontal-sm`	`paddingInlineSM`	-
`@btn-height-base`	`controlHeight`	全局 Token
`@btn-height-lg`	`controlHeightLG`	全局 Token
`@btn-height-sm`	`controlHeightSM`	全局 Token
`@btn-line-height`	`lineHeight`	全局 Token
`@btn-circle-size`	`controlHeight`	全局 Token
`@btn-circle-size-lg`	`controlHeightLG`	全局 Token
`@btn-circle-size-sm`	`controlHeightSM`	全局 Token
`@btn-square-size`	`controlHeight`	全局 Token
`@btn-square-size-lg`	`controlHeightLG`	全局 Token
`@btn-square-size-sm`	`controlHeightSM`	全局 Token
`@btn-square-only-icon-size`	`onlyIconSize`	-
`@btn-square-only-icon-size-sm`	`onlyIconSizeSM`	-
`@btn-square-only-icon-size-lg`	`onlyIconSizeLG`	-
`@btn-group-border`	`groupBorderColor`	-
`@btn-link-hover-bg`	`linkHoverBg`	-
`@btn-text-hover-bg`	`textHoverBg`	-

Calendar 日历

Less 变量	Component Token	备注
`@calendar-bg`	-	由于样式变化已废弃
`@calendar-input-bg`	-	由于样式变化已废弃
`@calendar-border-color`	-	由于样式变化已废弃
`@calendar-item-active-bg`	`itemActiveBg`	-
`@calendar-column-active-bg`	-	由于样式变化已废弃
`@calendar-full-bg`	`fullBg`	-
`@calendar-full-panel-bg`	`fullPanelBg`	-

Card 卡片

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	备注
`@carousel-dot-width`	`dotWidth`	-
`@carousel-dot-height`	`dotHeight`	-
`@carousel-dot-active-width`	`dotActiveWidth`	-

Checkbox 多选框

Less 变量	Component Token	备注
`@checkbox-size`	`controlInteractiveSize`	全局 Token
`@checkbox-color`	`colorPrimary`	-
`@checkbox-check-color`	`colorWhite`	-
`@checkbox-check-bg`	-	`colorPrimary`
`@checkbox-border-width`	`lineWidth`	-
`@checkbox-border-radius`	`borderRadiusSM`	-
`@checkbox-group-item-margin-right`	-	由于样式变化已废弃

Descriptions 描述列表

less 变量	Component Token	备注
`@descriptions-bg`	`labelBg`	-
`@descriptions-title-margin-bottom`	`titleMarginBottom`	-
`@descriptions-default-padding`	`padding`、`paddingLG`	全局 Token，对应值为 `${token.padding}px ${token.paddingLG}px`
`@descriptions-middle-padding`	`paddingSM`、`paddingLG`	全局 Token，对应值为 `${token.paddingSM}px ${token.paddingLG}px`
`@descriptions-small-padding`	`paddingXS`、`padding`	全局 Token，对应值为 `${token.paddingXS}px ${token.padding}px`
`@descriptions-item-padding-bottom`	`itemPaddingBottom`	-
`@descriptions-item-trailing-colon`	-	由于样式变化已废弃
`@descriptions-item-label-colon-margin-right`	`colonMarginRight`	-
`@descriptions-item-label-colon-margin-left`	`colonMarginLeft`	-
`@descriptions-extra-color`	`extraColor`	-

Divider 分割线

less 变量	Component Token	备注
`@divider-text-padding`	`textPaddingInline`	-
`@divider-orientation-margin`	`orientationMargin`	-
`@divider-color`	`colorSplit`	全局 Token
`@divider-vertical-gutter`	`verticalMarginInline`	-

Drawer 抽屉

Less 变量	Component Token	备注
`@drawer-bg`	`colorBgElevated`	全局 Token
`@drawer-header-padding`	`padding`、`paddingLG`	全局 Token，对应值为 `${padding}px ${paddingLG}px`
`@drawer-title-font-size`	`fontSizeLG`	全局 Token
`@drawer-title-line-height`	`lineHeightLG`	全局 Token
`@drawer-body-padding`	`paddingLG`	全局 Token
`@drawer-footer-padding-vertical`	`footerPaddingBlock`	`footerPaddingBlock` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位
`@drawer-footer-padding-horizontal`	`footerPaddingInline`	`footerPaddingInline` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位

Less 变量	Component Token	备注
`@dropdown-selected-color`	`colorPrimary`	-
`@dropdown-menu-submenu-disabled-bg`	`colorBgElevated`	全局 Token
`@dropdown-selected-bg`	`controlItemBgActive`	全局 Token

Empty 空状态

Less 变量	Component Token	备注
`@empty-font-size`	`fontSize`	全局 Token

Image 图片

less 变量	Component Token	备注
`@image-size-base`	-	未使用已废弃
`@image-font-size-base`	-	未使用已废弃
`@image-bg`	`colorFillTertiary`	全局 Token
`@image-color`	`colorTextLightSolid`	全局 Token
`@image-preview-operation-size`	`previewOperationSize`	-
`@image-preview-operation-color`	`previewOperationColor`	-
`@image-preview-operation-disabled-color`	`previewOperationColorDisabled`	-

List 列表

less 变量	Component Token	备注
`@list-header-background`	`headerBg`	-
`@list-footer-background`	`footerBg`	-
`@list-empty-text-padding`	`emptyTextPadding`	-
`@list-item-padding`	`itemPadding`	-
`@list-item-padding-sm`	`itemPaddingSM`	-
`@list-item-padding-lg`	`itemPaddingLG`	-
`@list-item-meta-margin-bottom`	`metaMarginBottom`	-
`@list-item-meta-avatar-margin-right`	`avatarMarginRight`	-
`@list-item-meta-title-margin-bottom`	`titleMarginBottom`	-
`@list-customize-card-bg`	-	由于样式变化已废弃
`@list-item-meta-description-font-size`	`descriptionFontSize`	-

Mentions 提及

less 变量	Component Token	备注
`@mentions-dropdown-bg`	`colorBgElevated`	-
`@mentions-dropdown-menu-item-hover-bg`	-	已废弃

Less 变量	Component Token	备注
`@menu-inline-toplevel-item-height`	`itemHeight`	同 `@menu-item-height`
`@menu-item-height`	`itemHeight`	-
`@menu-item-group-height`	`groupTitleLineHeight`	-
`@menu-collapsed-width`	`collapsedWidth`	-
`@menu-bg`	`itemBg`	-
`@menu-popup-bg`	`popupBg`	-
`@menu-item-color`	`itemColor`	-
`@menu-inline-submenu-bg`	`subMenuItemBg`	-
`@menu-highlight-color`	`itemSelectedColor`	-
`@menu-highlight-danger-color`	`dangerItemSelectedColor`	-
`@menu-item-active-bg`	`itemActiveBg`	-
`@menu-item-active-danger-bg`	`dangerItemActiveBg`	-
`@menu-item-active-border-width`	`activeBarBorderWidth`	-
`@menu-item-group-title-color`	`groupTitleColor`	-
`@menu-item-vertical-margin`	`itemMarginBlock`	-
`@menu-item-font-size`	`fontSize`	全局 Token
`@menu-item-boundary-margin`	-	因样式调整已废弃，可使用 `itemMarginBlock` 替代
`@menu-item-padding-horizontal`	`itemPaddingInline`	-
`@menu-item-padding`	-	已废弃，使用 `itemPaddingInline` 和 `itemHeight` 替代
`@menu-horizontal-line-height`	`horizontalLineHeight`	-
`@menu-icon-margin-right`	`iconMarginInlineEnd`	-
`@menu-icon-size`	`iconSize`	-
`@menu-icon-size-lg`	`horizontalLineHeight`	-
`@menu-dark-color`	`darkItemColor`	-
`@menu-dark-danger-color`	`darkDangerItemColor`	-
`@menu-dark-bg`	`darkItemBg`	-
`@menu-dark-arrow-color`	-	已废弃，和文字颜色相同
`@menu-dark-inline-submenu-bg`	`darkSubMenuItemBg`	-
`@menu-dark-highlight-color`	`darkItemSelectedColor`	-
`@menu-dark-item-active-bg`	`darkItemSelectedBg`	-
`@menu-dark-item-active-danger-bg`	`darkDangerItemSelectedBg`	-
`@menu-dark-selected-item-icon-color`	-	已废弃，同 `darkItemSelectedColor`
`@menu-dark-selected-item-text-color`	-	已废弃，同 `darkItemSelectedColor`
`@menu-dark-item-hover-bg`	`darkItemHoverBg`	-

Message 全局提示

Less 变量	Component Token	备注
`@zindex-message`	`zIndexPopup`	-
`@message-notice-content-padding`	`contentPadding`	-
`@message-notice-content-bg`	`contentBg`	-

Less 变量	Component Token	备注
`@modal-header-padding-vertical`	-	由于样式变化已废弃
`@modal-header-padding-horizontal`	-	由于样式变化已废弃
`@modal-body-padding`	-	由于样式变化已废弃
`@modal-header-bg`	`headerBg`	-
`@modal-header-padding`	-	由于样式变化已废弃
`@modal-header-border-width`	-	由于样式变化已废弃
`@modal-header-border-style`	-	由于样式变化已废弃
`@modal-header-title-line-height`	`titleLineHeight`	-
`@modal-header-title-font-size`	`titleFontSize`	-
`@modal-header-border-color-split`	-	由于样式变化已废弃
`@modal-header-close-size`	-	由于样式变化已废弃
`@modal-content-bg`	`contentBg`	-
`@modal-heading-color`	`titleColor`	-
`@modal-close-color`	`colorIcon`	全局 Token
`@modal-footer-bg`	`footerBg`	-
`@modal-footer-border-color-split`	-	由于样式变化已废弃
`@modal-footer-border-style`	-	由于样式变化已废弃
`@modal-footer-padding-vertical`	-	由于样式变化已废弃
`@modal-footer-padding-horizontal`	-	由于样式变化已废弃
`@modal-footer-border-width`	-	由于样式变化已废弃
`@modal-mask-bg`	`colorBgMask`	全局 Token
`@modal-confirm-body-padding`	-	由于样式变化已废弃
`@modal-confirm-title-font-size`	`titleFontSize`	-
`@modal-border-radius`	`borderRadiusLG`	全局 Token

Pagination 分页

Less 变量	Component Token	备注
`@pagination-item-bg`	`itemBg`	-
`@pagination-item-size`	`itemSize`	-
`@pagination-item-size-sm`	`itemSizeSM`	-
`@pagination-font-family`	`fontFamily`	全局 Token
`@pagination-font-weight-active`	`fontWeightStrong`	全局 Token
`@pagination-item-bg-active`	`itemActiveBg`	-
`@pagination-item-link-bg`	`itemLinkBg`	-
`@pagination-item-disabled-color-active`	`itemActiveColorDisabled`	-
`@pagination-item-disabled-bg-active`	`itemActiveBgDisabled`	-
`@pagination-item-input-bg`	`itemInputBg`	-
`@pagination-mini-options-size-changer-top`	`miniOptionsSizeChangerTop`	-

Less variables	Component Token	Note
`@popover-bg`	`colorBgElevated`	-
`@popover-color`	`colorText`	全局 Token
`@popover-min-width`	`minWidth`	-
`@popover-min-height`	-	已废弃
`@popover-arrow-width`	`sizePopupArrow`	全局 Token
`@popover-arrow-color`	-	已废弃
`@popover-arrow-outer-color`	-	已废弃
`@popover-distance`	`marginXXS`	全局 Token
`@popover-padding-horizontal`	-	已废弃

Radio 单选框

less 变量	Component Token	备注
`@radio-size`	`radioSize`	-
`@radio-top`	-	已废弃
`@radio-border-width`	`lineWidth`	全局 Token
`@radio-dot-size`	`dotSize`	-
`@radio-dot-color`	-	已废弃
`@radio-dot-disabled-color`	`dotColorDisabled`	-
`@radio-solid-checked-color`	`buttonSolidCheckedColor`	-
`@radio-button-bg`	`buttonBg`	-
`@radio-button-checked-bg`	`buttonCheckedBg`	-
`@radio-button-color`	`buttonColor`	-
`@radio-button-hover-color`	`colorPrimaryHover`	全局 Token
`@radio-button-active-color`	`colorPrimaryActive`	全局 Token
`@radio-button-padding-horizontal`	`buttonPaddingInline`	-
`@radio-disabled-button-checked-bg`	`buttonCheckdBgDisabled`	-
`@radio-disabled-button-checked-color`	`buttonCheckdColorDisabled`	-
`@radio-wrapper-margin-right`	`wrapperMarginInlineEnd`	-

Rate 评分

less 变量	Component Token	备注
`@rate-star-color`	`starColor`	-
`@rate-star-bg`	`starBg`	-
`@rate-star-size`	`starSize`	-
`@rate-star-hover-scale`	`starHoverScale`	-

Result 结果

Less 变量	Component Token	备注
`@result-title-font-size`	`titleFontSize`	-
`@result-subtitle-font-size`	`subtitleFontSize`	-
`@result-extra-margin`	`extraMargin`	-

Segment

Less 变量	Component Token	备注
`@segmented-container-padding`	`padding`	-
`@segmented-label-color`	`itemColor`	-
`@segmented-bg`	-	可以用 `className` 或 `style` 自定义
`@segmented-hover-bg`	`itemHoverBg`	-
`@segmented-label-hover-color`	`itemHoverColor`	-
`@segmented-selected-bg`	`itemSelectedBg`	-

Skeleton 骨架屏

Less 变量	Component Token	备注
`@skeleton-block-radius`	`blockRadius`	-
`@skeleton-title-height`	`titleHeight`	-
`@skeleton-color`	`gradientFromColor`	-
`@skeleton-to-color`	`gradientToColor`	-
`@skeleton-paragraph-margin-top`	`paragraphMarginTop`	-
`@skeleton-paragraph-li-height`	`paragraphLiHeight`	-
`@skeleton-paragraph-li-margin-top`	-	由于样式变化已废弃

Slider 滑动输入条

Less 变量	Component Token	备注
`@slider-margin`	-	可由 `className` 或 `style` 直接修改
`@slider-rail-background-color`	`railBg`	-
`@slider-rail-background-color-hover`	`railHoverBg`	-
`@slider-track-background-color`	`trackBg`	-
`@slider-track-background-color-hover`	`trackHoverBg`	-
`@slider-handle-border-width`	`handleLineWidth`	-
`@slider-handle-background-color`	-	已废弃
`@slider-handle-color`	`handleColor`	-
`@slider-handle-color-hover`	`handleActiveColor`	-
`@slider-handle-color-focus`	`handleActiveColor`	-
`@slider-handle-color-focus-shadow`	-	已废弃
`@slider-handle-color-tooltip-open`	`handleActiveColor`	-
`@slider-handle-size`	`handleSize`	-
`@slider-handle-margin-top`	-	已废弃
`@slider-handle-margin-left`	-	已废弃
`@slider-handle-shadow`	-	已废弃
`@slider-dot-border-color`	`dotBorderColor`	-
`@slider-dot-border-color-active`	`dotActiveBorderColor`	-
`@slider-disabled-color`	`trackBgDisabled`	-
`@slider-disabled-background-color`	-	已废弃

Statistic 统计数值

Less 变量	Component Token	备注
`@statistic-title-font-size`	`titleFontSize`	-
`@statistic-content-font-size`	`contentFontSize`	-
`@statistic-font-family`	`fontFamily`	全局 Token

Step 步骤条

Less 变量	Component Token	备注
`@process-tail-color`	`colorSplit`	全局 Token
`@steps-nav-arrow-color`	`navArrowColor`	-
`@steps-background`	`colorBgContainer`	-
`@steps-icon-size`	`iconSize`	-
`@steps-icon-custom-size`	`customIconSize`	-
`@steps-icon-custom-top`	`customIconTop`	-
`@steps-icon-custom-font-size`	`customIconFontSize`	-
`@steps-icon-top`	`iconTop`	-
`@steps-icon-font-size`	`iconFontSize`	-
`@steps-icon-margin`	-	已废弃
`@steps-title-line-height`	`titleLineHeight`	-
`@steps-small-icon-size`	`iconSizeSM`	-
`@steps-small-icon-margin`	-	已废弃
`@steps-dot-size`	`dotSize`	-
`@steps-dot-top`	-	已废弃
`@steps-current-dot-size`	`dotCurrentSize`	-
`@steps-description-max-width`	`descriptionMaxWidth`	-
`@steps-nav-content-max-width`	`stepsNavContentMaxWidth`	-
`@steps-vertical-icon-width`	`iconSize`	-
`@steps-vertical-tail-width`	-	已废弃
`@steps-vertical-tail-width-sm`	-	已废弃

Table 表格

Less 变量	Component Token	备注
`@table-bg`	`colorBgContainer`	全局 Token
`@table-header-bg`	`headerBg`	-
`@table-header-color`	`headerColor`	-
`@table-header-sort-bg`	`headerSortActiveBg`	-
`@table-body-sort-bg`	`bodySortActiveBg`	-
`@table-row-hover-bg`	`rowHoverBg`	-
`@table-selected-row-color`	`colorText`	全局 Token
`@table-selected-row-bg`	`rowSelectedBg`	-
`@table-body-selected-sort-bg`	-	已废弃，同 `rowSelectedBg`
`@table-selected-row-hover-bg`	`rowSelectedHoverBg`	-
`@table-expanded-row-bg`	`rowExpandedBg`	-
`@table-padding-vertical`	`cellPaddingBlock`	-
`@table-padding-horizontal`	`cellPaddingInline`	-
`@table-padding-vertical-md`	`cellPaddingBlockMD`	-
`@table-padding-horizontal-md`	`cellPaddingInlineMD`	-
`@table-padding-vertical-sm`	`cellPaddingBlockSM`	-
`@table-padding-horizontal-sm`	`cellPaddingInlineSM`	-
`@table-border-color`	`borderColor`	-
`@table-border-radius-base`	`headerBorderRadius`	-
`@table-footer-bg`	`footerBg`	-
`@table-footer-color`	`footerColor`	-
`@table-header-bg-sm`	-	已废弃，同 `headerBg`
`@table-font-size`	`cellFontSize`	-
`@table-font-size-md`	`cellFontSizeMD`	-
`@table-font-size-sm`	`cellFontSizeSM`	-
`@table-header-cell-split-color`	`headerSplitColor`	-
`@table-header-sort-active-bg`	`headerSortHoverBg`	v4 中有误，实际上用于悬浮背景色
`@table-fixed-header-sort-active-bg`	`fixedHeaderSortActiveBg`	-
`@table-header-filter-active-bg`	`headerFilterHoverBg`	-
`@table-filter-btns-bg`	-	已废弃，同 `filterDropdownBg`
`@table-filter-dropdown-bg`	`filterDropdownBg`	-
`@table-expand-icon-bg`	`expandIconBg`	-
`@table-selection-column-width`	`selectionColumnWidth`	-
`@table-sticky-scroll-bar-bg`	`stickyScrollBarBg`	-
`@table-sticky-scroll-bar-radius`	`stickyScrollBarBorderRadius`	-

Tabs 标签页

Less 变量	Component Token	备注
`@tabs-card-head-background`	`cardBg`	-
`@tabs-card-height`	`cardHeight`	-
`@tabs-card-active-color`	`itemSelectedColor`	-
`@tabs-card-horizontal-padding`	`cardPadding`	-
`@tabs-card-horizontal-padding-sm`	`cardPaddingSM`	-
`@tabs-card-horizontal-padding-lg`	`cardPaddingLG`	-
`@tabs-title-font-size`	`titleFontSize`	-
`@tabs-title-font-size-lg`	`titleFontSizeLG`	-
`@tabs-title-font-size-sm`	`titleFontSizeSM`	-
`@tabs-ink-bar-color`	`inkBarColor`	-
`@tabs-bar-margin`	`horizontalMargin`	-
`@tabs-horizontal-gutter`	`horizontalItemGutter`	-
`@tabs-horizontal-margin`	`horizontalItemMargin`	-
`@tabs-horizontal-margin-rtl`	`horizontalItemMarginRTL`	-
`@tabs-horizontal-padding`	`horizontalItemPadding`	-
`@tabs-horizontal-padding-lg`	`horizontalItemPaddingLG`	-
`@tabs-horizontal-padding-sm`	`horizontalItemPaddingSM`	-
`@tabs-vertical-padding`	`verticalItemPadding`	-
`@tabs-vertical-margin`	`verticalItemMargin`	-
`@tabs-scrolling-size`	-	已废弃
`@tabs-highlight-color`	`itemSelectedColor`	-
`@tabs-hover-color`	`itemHoverColor`	-
`@tabs-active-color`	`itemActiveColor`	-
`@tabs-card-gutter`	`cardGutter`	-
`@tabs-card-tab-active-border-top`	-	已废弃

Tag 标签

less 变量	Component Token	备注
`@tag-border-radius`	`borderRadiusSM`	全局 Token
`@tag-default-bg`	`defaultBg`	-
`@tag-default-color`	`defaultColor`	-
`@tag-font-size`	`fontSizeSM`	全局 Token
`@tag-line-height`	`lineHeightSM`	全局 Token

Timeline 时间轴

Less 变量	Component Token	备注
`@timeline-width`	`tailWidth`	`tailWidth` 为数字，不带单位，`@timeline-width` 带单位
`@timeline-color`	`tailColor`	-
`@timeline-dot-border-width`	`dotBorderWidth`	-
`@timeline-dot-color`	-	已废弃
`@timeline-dot-bg`	`dotBg`	-
`@timeline-item-padding-bottom`	`itemPaddingBottom`	-

less 变量	Component Token	备注
`@tooltip-max-width`	-	可由 `className` 或 `style` 直接修改
`@tooltip-color`	`colorTextLightSolid`	全局 Token
`@tooltip-bg`	`colorBgSpotlight`	全局 token
`@tooltip-arrow-width`	`sizePopupArrow`	全局 Token
`@tooltip-distance`	`marginXXS`	全局 Token
`@tooltip-arrow-color`	-	同 `@tooltip-bg`，已废弃
`@tooltip-border-radius`	`borderRadius`	全局 Token

Transfer 穿梭框

Less variables	Component Token	Note
`@transfer-header-height`	`headerHeight`	-
`@transfer-item-height`	`itemHeight`	-
`@transfer-disabled-bg`	`colorBgContainerDisabled`	全局 Token
`@transfer-list-height`	`listHeight`	-
`@transfer-item-hover-bg`	`controlItemBgHover`	全局 Token
`@transfer-item-selected-hover-bg`	`controlItemBgActiveHover`	全局 Token
`@transfer-item-padding-vertical`	`itemPaddingBlock`	-
`@transfer-list-search-icon-top`	-	已废弃

Typography 排版

less 变量	Component Token	备注
`@typography-title-font-weight`	`fontWeightStrong`	全局 Token
`@typography-title-margin-top`	`titleMarginTop`	-
`@typography-title-margin-bottom`	`titleMarginBottom`	-

Upload 上传

less 变量	Component Token	备注
`@upload-actions-color`	`actionsColor`	-

28 KiB

Raw Blame History

如何配置 Component Token

组件变量

Anchor 锚点

Avatar 头像

Button 按钮

Calendar 日历

Card 卡片

Carousel 走马灯

Checkbox 多选框

Descriptions 描述列表

Divider 分割线

Drawer 抽屉

Empty 空状态

Image 图片

List 列表

Menu 导航菜单

Message 全局提示

Popover 气泡卡片

Radio 单选框

Rate 评分

Result 结果

Segment

Skeleton 骨架屏

Slider 滑动输入条

Statistic 统计数值

Step 步骤条

Table 表格

Tabs 标签页

Tag 标签

Timeline 时间轴

Tooltip 文字提示

Typography 排版

Upload 上传

28 KiB Raw Blame History Unescape Escape

如何配置 Component Token

组件变量

Anchor 锚点

Avatar 头像

BreadCrumb 面包屑

Button 按钮

Calendar 日历

Card 卡片

Carousel 走马灯

Checkbox 多选框

Descriptions 描述列表

Divider 分割线

Drawer 抽屉

Dropdown 下拉菜单

Empty 空状态

Image 图片

List 列表

Menu 导航菜单

Message 全局提示

Modal 对话框

Pagination 分页

Popover 气泡卡片

Radio 单选框

Rate 评分

Result 结果

Segment

Skeleton 骨架屏

Slider 滑动输入条

Statistic 统计数值

Step 步骤条

Table 表格

Tabs 标签页

Tag 标签

Timeline 时间轴

Tooltip 文字提示

Typography 排版

Upload 上传

28 KiB

Raw Blame History