diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f05ed3ca6..67f920df8 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,11 @@ # CHANGELOG +## NEXT_VERSION + +### Features + +- `n-space` adds `reverse` prop. + ## 2.36.0 ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ff1c37872..d706866f8 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,9 @@ # CHANGELOG +## NEXT_VERSION + +- `n-space` 新增 `reverse` 属性 + ## 2.36.0 ### Fixes diff --git a/src/space/src/Space.tsx b/src/space/src/Space.tsx index a0122529b..346ccb27a 100644 --- a/src/space/src/Space.tsx +++ b/src/space/src/Space.tsx @@ -41,6 +41,7 @@ export const spaceProps = { }, inline: Boolean, vertical: Boolean, + reverse: Boolean, size: { type: [String, Number, Array] as PropType< 'small' | 'medium' | 'large' | number | [number, number] @@ -112,6 +113,7 @@ export default defineComponent({ render () { const { vertical, + reverse, align, inline, justify, @@ -142,7 +144,12 @@ export default defineComponent({ ]} style={{ display: inline ? 'inline-flex' : 'flex', - flexDirection: vertical ? 'column' : 'row', + flexDirection: (() => { + if (vertical && !reverse) return 'column' + if (vertical && reverse) return 'column-reverse' + if (!vertical && reverse) return 'row-reverse' + /** (!vertical && !reverse) */ else return 'row' + })(), justifyContent: ['start', 'end'].includes(justify) ? 'flex-' + justify : justify,