diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 33c006b4cdb..74b74af4eb5 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-breadcrumb` supports RTL. ## 2.34.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 23f2404fb81..4cde28ddee3 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-breadcrumb` 支持 RTL ## 2.34.3 diff --git a/src/breadcrumb/demos/zhCN/index.demo-entry.md b/src/breadcrumb/demos/zhCN/index.demo-entry.md index 0f1b9ab5c1e..967e76c48bf 100644 --- a/src/breadcrumb/demos/zhCN/index.demo-entry.md +++ b/src/breadcrumb/demos/zhCN/index.demo-entry.md @@ -9,6 +9,7 @@ basic.vue custom.vue separator.vue separator-per-item.vue +rtl-debug.vue ``` ## API diff --git a/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue new file mode 100644 index 00000000000..a44bac1e7e8 --- /dev/null +++ b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue @@ -0,0 +1,36 @@ + +# Rtl Debug + + + + + + diff --git a/src/breadcrumb/src/Breadcrumb.tsx b/src/breadcrumb/src/Breadcrumb.tsx index 9ba588fdfd8..485790caa9f 100644 --- a/src/breadcrumb/src/Breadcrumb.tsx +++ b/src/breadcrumb/src/Breadcrumb.tsx @@ -7,7 +7,7 @@ import { Ref, toRef } from 'vue' -import { useConfig, useTheme, useThemeClass } from '../../_mixins' +import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins' import type { ThemeProps } from '../../_mixins' import { breadcrumbLight } from '../styles' import type { BreadcrumbTheme } from '../styles' @@ -36,7 +36,8 @@ export default defineComponent({ name: 'Breadcrumb', props: breadcrumbProps, setup (props) { - const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) + const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = + useConfig(props) const themeRef = useTheme( 'Breadcrumb', '-breadcrumb', @@ -45,6 +46,7 @@ export default defineComponent({ props, mergedClsPrefixRef ) + const rtlEnabledRef = useRtl('Breadcrumb', mergedRtlRef, mergedClsPrefixRef) provide(breadcrumbInjectionKey, { separatorRef: toRef(props, 'separator'), mergedClsPrefixRef @@ -88,14 +90,19 @@ export default defineComponent({ mergedClsPrefix: mergedClsPrefixRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, - onRender: themeClassHandle?.onRender + onRender: themeClassHandle?.onRender, + rtlEnabled: rtlEnabledRef } }, render () { this.onRender?.() return (