diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index b3b5c2f0164..09bafe2017a 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -11,6 +11,7 @@ - `n-config-provider` add global config of the `Empty` component, closes [#1092](https://github.com/TuSimple/naive-ui/issues/1092). - `n-select` add `on-update:show` prop. - `n-auto-complete` exports `AutoCompleteOption` and `AutoCompleteGroupOption` types. +- `n-page-header` add `RTL` support. ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f940559acb8..8405f52a4a8 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -11,6 +11,7 @@ - `n-config-provider` 新增 `Empty` 组件的全局配置，关闭 [#1092](https://github.com/TuSimple/naive-ui/issues/1092) - `n-select` 新增 `on-update:show` 属性 - `n-auto-complete` 导出 `AutoCompleteOption` 以及 `AutoCompleteGroupOption` 类型 +- `n-page-header` 添加 `RTL` 支持 ### Fixes diff --git a/src/page-header/demos/zhCN/index.demo-entry.md b/src/page-header/demos/zhCN/index.demo-entry.md index 454f418f637..b700ca8dd77 100644 --- a/src/page-header/demos/zhCN/index.demo-entry.md +++ b/src/page-header/demos/zhCN/index.demo-entry.md @@ -8,6 +8,7 @@ ```demo basic +rtl-debug ``` ## Props diff --git a/src/page-header/demos/zhCN/rtl-debug.demo.md b/src/page-header/demos/zhCN/rtl-debug.demo.md new file mode 100644 index 00000000000..c546c853d6d --- /dev/null +++ b/src/page-header/demos/zhCN/rtl-debug.demo.md @@ -0,0 +1,93 @@ +# Rtl Debug + +```html + + Rtl + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +```js +import { EllipsisHorizontal } from '@vicons/ionicons5' +import { defineComponent, ref } from 'vue' +import { unstablePageHeaderRtl, useMessage } from 'naive-ui' + +export default defineComponent({ + components: { + EllipsisHorizontal + }, + setup () { + const message = useMessage() + return { + rtlEnabled: ref(false), + rtlStyles: [unstablePageHeaderRtl], + handleBack () { + message.info('[onBack]') + }, + options: [ + { + label: '催更', + key: '1' + }, + { + label: '催更', + key: '2' + }, + { + label: '催更', + key: '3' + } + ] + } + } +}) +``` diff --git a/src/page-header/src/PageHeader.tsx b/src/page-header/src/PageHeader.tsx index f0a58ea8e89..4d6651ab80e 100644 --- a/src/page-header/src/PageHeader.tsx +++ b/src/page-header/src/PageHeader.tsx @@ -8,6 +8,7 @@ import style from './styles/index.cssr' import { ArrowBackIcon } from '../../_internal/icons' import { NBaseIcon } from '../../_internal' import type { ExtractPublicPropTypes } from '../../_utils' +import useRtl from '../../_mixins/use-rtl' const pageHeaderProps = { ...(useTheme.props as ThemeProps), @@ -23,7 +24,7 @@ export default defineComponent({ name: 'PageHeader', props: pageHeaderProps, setup (props) { - const { mergedClsPrefixRef } = useConfig(props) + const { mergedClsPrefixRef, NConfigProvider } = useConfig(props) const themeRef = useTheme( 'PageHeader', 'PageHeader', @@ -32,7 +33,14 @@ export default defineComponent({ props, mergedClsPrefixRef ) + const rtlEnabledRef = useRtl( + 'PageHeader', + NConfigProvider?.mergedRtlRef, + mergedClsPrefixRef + ) + return { + rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, cssVars: computed(() => { const { @@ -65,15 +73,8 @@ export default defineComponent({ } }, render () { - const { - onBack, - title, - subtitle, - extra, - mergedClsPrefix, - cssVars, - $slots - } = this + const { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } = + this const { title: titleSlot, subtitle: subtitleSlot, @@ -88,7 +89,13 @@ export default defineComponent({ const showSubtitle = subtitle || subtitleSlot const showExtra = extra || extraSlot return ( -
+
{headerSlot ? (
{headerSlot()} diff --git a/src/page-header/src/styles/page-header-rtl.cssr.ts b/src/page-header/src/styles/page-header-rtl.cssr.ts new file mode 100644 index 00000000000..6ccd715fb8a --- /dev/null +++ b/src/page-header/src/styles/page-header-rtl.cssr.ts @@ -0,0 +1,20 @@ +import { c, cB, cM } from '../../../_utils/cssr' + +export default c([ + cB('page-header-wrapper', [ + cM('rtl', [ + cB('page-header-header', ` + direction: rtl; + `), + cB('page-header', ` + direction: rtl; + `), + cB('page-header-content', ` + direction: rtl; + `), + cB('page-header-footer', ` + direction: rtl; + `) + ]) + ]) +]) diff --git a/src/page-header/styles/index.ts b/src/page-header/styles/index.ts index 8ba3655c1fb..7b2ba91fa11 100644 --- a/src/page-header/styles/index.ts +++ b/src/page-header/styles/index.ts @@ -1,3 +1,4 @@ export { pageHeaderLight } from './light' export type { PageHeaderTheme, PageHeaderThemeVars } from './light' export { pageHeaderDark } from './dark' +export { default as pageHeaderRtl } from './rtl' diff --git a/src/page-header/styles/rtl.ts b/src/page-header/styles/rtl.ts new file mode 100644 index 00000000000..a5e7684b6ff --- /dev/null +++ b/src/page-header/styles/rtl.ts @@ -0,0 +1,6 @@ +import rtlStyle from '../src/styles/page-header-rtl.cssr' + +export default { + name: 'PageHeader', + style: rtlStyle +} diff --git a/src/styles.ts b/src/styles.ts index d101c5f96b2..d9159f986e3 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -38,6 +38,7 @@ export { messageDark } from './message/styles' export { modalDark } from './modal/styles' export { notificationDark } from './notification/styles' export { paginationDark } from './pagination/styles' +export { pageHeaderRtl as unstablePageHeaderRtl } from './page-header/styles' export { popconfirmDark } from './popconfirm/styles' export { popoverDark } from './popover/styles' export { popselectDark } from './popselect/styles'