feat(space): add reverse prop (#5248)

* feat: add reverse support for NSpace

* docs: add change log

---------

Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
kvii 2023-12-18 18:54:02 +08:00 committed by GitHub
parent a866ad7036
commit 8972d9261e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 1 deletions

View File

@ -1,5 +1,11 @@
# CHANGELOG # CHANGELOG
## NEXT_VERSION
### Features
- `n-space` adds `reverse` prop.
## 2.36.0 ## 2.36.0
### Fixes ### Fixes

View File

@ -1,5 +1,9 @@
# CHANGELOG # CHANGELOG
## NEXT_VERSION
- `n-space` 新增 `reverse` 属性
## 2.36.0 ## 2.36.0
### Fixes ### Fixes

View File

@ -41,6 +41,7 @@ export const spaceProps = {
}, },
inline: Boolean, inline: Boolean,
vertical: Boolean, vertical: Boolean,
reverse: Boolean,
size: { size: {
type: [String, Number, Array] as PropType< type: [String, Number, Array] as PropType<
'small' | 'medium' | 'large' | number | [number, number] 'small' | 'medium' | 'large' | number | [number, number]
@ -112,6 +113,7 @@ export default defineComponent({
render () { render () {
const { const {
vertical, vertical,
reverse,
align, align,
inline, inline,
justify, justify,
@ -142,7 +144,12 @@ export default defineComponent({
]} ]}
style={{ style={{
display: inline ? 'inline-flex' : 'flex', 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) justifyContent: ['start', 'end'].includes(justify)
? 'flex-' + justify ? 'flex-' + justify
: justify, : justify,