`;
+exports[`renders components/anchor/demo/component-token.tsx correctly 1`] = `
+
+`;
+
exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
(
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index 3469aa1326..31b1d67444 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -30,6 +30,7 @@ For displaying anchor hyperlinks on page and jumping between them.
Set Anchor scroll offset
Listening for anchor link change
Deprecated JSX demo
+
Component Token
## API
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index 2a393c4bb6..bed0635ec4 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -31,6 +31,7 @@ group:
设置锚点滚动偏移量
监听锚点链接改变
废弃的 JSX 示例
+
组件 Token
## API
diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts
index 6f9520da6d..8d7cb3b221 100644
--- a/components/anchor/style/index.ts
+++ b/components/anchor/style/index.ts
@@ -1,15 +1,16 @@
import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent, textEllipsis } from '../../style';
-export interface ComponentToken {}
+export interface ComponentToken {
+ linkPaddingBlock: number;
+ linkPaddingInlineStart: number;
+}
interface AnchorToken extends FullToken<'Anchor'> {
holderOffsetBlock: number;
- anchorPaddingBlock: number;
anchorPaddingBlockSecondary: number;
- anchorPaddingInline: number;
anchorBallSize: number;
anchorTitleBlock: number;
}
@@ -34,16 +35,14 @@ const genSharedAnchorStyle: GenerateStyle
= (token): CSSObject => {
// delete overflow: auto
// overflow: 'auto',
- backgroundColor: 'transparent',
-
[componentCls]: {
...resetComponent(token),
position: 'relative',
paddingInlineStart: lineWidthBold,
[`${componentCls}-link`]: {
- paddingBlock: token.anchorPaddingBlock,
- paddingInline: `${token.anchorPaddingInline}px 0`,
+ paddingBlock: token.linkPaddingBlock,
+ paddingInline: `${token.linkPaddingInlineStart}px 0`,
'&-title': {
...textEllipsis,
@@ -158,16 +157,21 @@ const genSharedAnchorHorizontalStyle: GenerateStyle = (token): CSSO
};
// ============================== Export ==============================
-export default genComponentStyleHook('Anchor', (token) => {
- const { fontSize, fontSizeLG, padding, paddingXXS } = token;
+export default genComponentStyleHook(
+ 'Anchor',
+ (token) => {
+ const { fontSize, fontSizeLG, paddingXXS } = token;
- const anchorToken = mergeToken(token, {
- holderOffsetBlock: paddingXXS,
- anchorPaddingBlock: paddingXXS,
- anchorPaddingBlockSecondary: paddingXXS / 2,
- anchorPaddingInline: padding,
- anchorTitleBlock: (fontSize / 14) * 3,
- anchorBallSize: fontSizeLG / 2,
- });
- return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
-});
+ const anchorToken = mergeToken(token, {
+ holderOffsetBlock: paddingXXS,
+ anchorPaddingBlockSecondary: paddingXXS / 2,
+ anchorTitleBlock: (fontSize / 14) * 3,
+ anchorBallSize: fontSizeLG / 2,
+ });
+ return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+ },
+ (token) => ({
+ linkPaddingBlock: token.paddingXXS,
+ linkPaddingInlineStart: token.padding,
+ }),
+);
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 564a6677b5..36505e6977 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -13,7 +13,16 @@ This document contains the correspondence between all the less variables related
-
+## Anchor
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@anchor-bg` | '-' | Can be modified directly by `className` or `style` |
+| `@anchor-border-color` | `colorSplit` | GlobalToken |
+| `@anchor-link-top` | `linkPaddingBlock` | - |
+| `@anchor-link-left` | `linkPaddingInlineStart` | - |
+| `@anchor-link-padding` | - | `${linkPaddingBlock}px ${linkPaddingInlineStart}px` |
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index e304a46c30..8101cc94db 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -13,7 +13,16 @@ title: Less 变量迁移 Design Token
-
+## 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` |