diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 33c006b4cdb..db8265d60ef 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
- `n-dynamic-input` adds `action` slot, closes [#3981](https://github.com/tusen-ai/naive-ui/issues/3981).
- `n-dynamic-input` add `disabled` prop, closes [#4055](https://github.com/tusen-ai/naive-ui/issues/4055).
- `n-data-table` adds `titleAlign` prop, closes [#3954](https://github.com/tusen-ai/naive-ui/issues/3954).
+- `n-anchor` supports RTL.
## 2.34.3
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 23f2404fb81..41067d011c5 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
- `n-dynamic-input` 新增 `action` slot,关闭 [#3981](https://github.com/tusen-ai/naive-ui/issues/3981)
- `n-dynamic-input` 新增 `disabled` 属性,关闭 [#4055](https://github.com/tusen-ai/naive-ui/issues/4055)
- `n-data-table` 新增 `titleAlign` 属性,关闭 [#3954](https://github.com/tusen-ai/naive-ui/issues/3954)
+- `n-anchor` 支持 RTL
## 2.34.3
diff --git a/src/anchor/demos/zhCN/index.demo-entry.md b/src/anchor/demos/zhCN/index.demo-entry.md
index 7c853146a1e..25d34861fe5 100644
--- a/src/anchor/demos/zhCN/index.demo-entry.md
+++ b/src/anchor/demos/zhCN/index.demo-entry.md
@@ -12,6 +12,7 @@ ignore-gap.vue
affix.vue
scrollto.vue
max-height-debug.vue
+rtl-debug.vue
```
## API
diff --git a/src/anchor/demos/zhCN/rtl-debug.demo.vue b/src/anchor/demos/zhCN/rtl-debug.demo.vue
new file mode 100644
index 00000000000..fbeaef1f3cb
--- /dev/null
+++ b/src/anchor/demos/zhCN/rtl-debug.demo.vue
@@ -0,0 +1,37 @@
+
+# Rtl Debug
+
+
+
+
+
+ Rtl
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/anchor/src/AnchorAdapter.tsx b/src/anchor/src/AnchorAdapter.tsx
index 340bbb8f213..60b7220635d 100644
--- a/src/anchor/src/AnchorAdapter.tsx
+++ b/src/anchor/src/AnchorAdapter.tsx
@@ -1,7 +1,7 @@
import { h, defineComponent, computed, ref, CSSProperties } from 'vue'
import { NAffix } from '../../affix'
import { affixProps, affixPropKeys } from '../../affix/src/Affix'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import type { ExtractPublicPropTypes } from '../../_utils'
import { keep } from '../../_utils'
@@ -28,7 +28,9 @@ export default defineComponent({
name: 'Anchor',
props: anchorProps,
setup (props, { slots }) {
- const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+ const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } =
+ useConfig(props)
+ const rtlEnabledRef = useRtl('Anchor', mergedRtlRef, mergedClsPrefixRef)
const themeRef = useTheme(
'Anchor',
'-anchor',
@@ -74,6 +76,7 @@ export default defineComponent({
? useThemeClass('anchor', undefined, cssVarsRef, props)
: undefined
return {
+ rtlEnabled: rtlEnabledRef,
scrollTo (href: string) {
anchorRef.value?.setActiveHref(href)
},
@@ -87,7 +90,10 @@ export default defineComponent({
? undefined
: (cssVarsRef.value as CSSProperties)
}
- class={themeClassHandle?.themeClass.value}
+ class={[
+ themeClassHandle?.themeClass.value,
+ rtlEnabledRef?.value && `${mergedClsPrefixRef.value}-anchor--rtl`
+ ]}
{...keep(props, baseAnchorPropKeys)}
mergedClsPrefix={mergedClsPrefixRef.value}
>
diff --git a/src/anchor/src/styles/rtl.cssr.ts b/src/anchor/src/styles/rtl.cssr.ts
new file mode 100644
index 00000000000..cfbe3cfcfc3
--- /dev/null
+++ b/src/anchor/src/styles/rtl.cssr.ts
@@ -0,0 +1,20 @@
+import { cB, cM, cE } from '../../../_utils/cssr'
+
+export default cB('anchor', [
+ cM('rtl', `
+ direction: rtl;
+ `, [
+ cB('anchor-rail', `
+ right: 0;
+ left: unset;
+ `),
+ cB('anchor-link', `
+ padding: 0 16px 0 0;
+ `, [
+ cE('title', `
+ padding-right: 0;
+ padding-left: 16px
+ `)
+ ])
+ ])
+])
diff --git a/src/anchor/styles/index.ts b/src/anchor/styles/index.ts
index 9a393ab40ee..3a2b0caa605 100644
--- a/src/anchor/styles/index.ts
+++ b/src/anchor/styles/index.ts
@@ -1,3 +1,4 @@
export { default as anchorDark } from './dark'
export { default as anchorLight } from './light'
+export { anchorRtl } from './rtl'
export type { AnchorThemeVars, AnchorTheme } from './light'
diff --git a/src/anchor/styles/rtl.ts b/src/anchor/styles/rtl.ts
new file mode 100644
index 00000000000..876d55980d1
--- /dev/null
+++ b/src/anchor/styles/rtl.ts
@@ -0,0 +1,7 @@
+import { RtlItem } from '../../config-provider/src/internal-interface'
+import rtlStyle from '../src/styles/rtl.cssr'
+
+export const anchorRtl: RtlItem = {
+ name: 'Anchor',
+ style: rtlStyle
+}
diff --git a/src/styles.ts b/src/styles.ts
index 7e5a7eeae34..d4937b9a936 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,6 +1,6 @@
export { commonDark, commonLight } from './_styles/common'
export { alertDark, alertRtl as unstableAlertRtl } from './alert/styles'
-export { anchorDark } from './anchor/styles'
+export { anchorDark, anchorRtl as unstableAnchorRtl } from './anchor/styles'
export { autoCompleteDark } from './auto-complete/styles'
export { avatarDark } from './avatar/styles'
export { avatarGroupRtl as unstableAvatarGroupRtl } from './avatar-group/styles'