mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
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:
parent
a866ad7036
commit
8972d9261e
@ -1,5 +1,11 @@
|
|||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
|
## NEXT_VERSION
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- `n-space` adds `reverse` prop.
|
||||||
|
|
||||||
## 2.36.0
|
## 2.36.0
|
||||||
|
|
||||||
### Fixes
|
### Fixes
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
# CHANGELOG
|
# CHANGELOG
|
||||||
|
|
||||||
|
## NEXT_VERSION
|
||||||
|
|
||||||
|
- `n-space` 新增 `reverse` 属性
|
||||||
|
|
||||||
## 2.36.0
|
## 2.36.0
|
||||||
|
|
||||||
### Fixes
|
### Fixes
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user