diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index f9ff481f72..a0cc0c4958 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -274,7 +274,7 @@ export default class Anchor extends React.Component { } }; - renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => { + renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', @@ -298,7 +298,9 @@ export default class Anchor extends React.Component { visible: activeLink, }); - const wrapperClass = classNames(className, `${prefixCls}-wrapper`); + const wrapperClass = classNames(className, `${prefixCls}-wrapper`, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const anchorClass = classNames(prefixCls, { fixed: !affix && !showInkInFixed, diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 9797308072..4ec7fb3d80 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -80,3 +80,5 @@ padding-bottom: 5px; } } + +@import './rtl'; diff --git a/components/anchor/style/rtl.less b/components/anchor/style/rtl.less new file mode 100644 index 0000000000..326aa2778e --- /dev/null +++ b/components/anchor/style/rtl.less @@ -0,0 +1,40 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@anchor-border-width: 2px; + +.@{ant-prefix}-anchor { + &-rtl { + direction: rtl; + } + + &-wrapper { + .@{ant-prefix}-anchor-rtl& { + margin-right: -4px; + margin-left: 0; + padding-right: 4px; + padding-left: 0; + } + } + + &-ink { + .@{ant-prefix}-anchor-rtl & { + right: 0; + left: auto; + } + + &-ball { + .@{ant-prefix}-anchor-rtl & { + right: 50%; + left: 0; + transform: translateX(50%); + } + } + } + + &-link { + .@{ant-prefix}-anchor-rtl & { + padding: 7px 16px 7px 0; + } + } +}