diff --git a/src/space/demos/enUS/center.demo.md b/src/space/demos/enUS/center.demo.md new file mode 100644 index 000000000..450500048 --- /dev/null +++ b/src/space/demos/enUS/center.demo.md @@ -0,0 +1,9 @@ +# From Center + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/demos/enUS/index.demo-entry.md b/src/space/demos/enUS/index.demo-entry.md index e13385d5e..b58292c10 100644 --- a/src/space/demos/enUS/index.demo-entry.md +++ b/src/space/demos/enUS/index.demo-entry.md @@ -8,6 +8,9 @@ A great invention. basic vertical from-end +space-between +space-around +center ``` ## Props @@ -17,7 +20,7 @@ from-end | align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | | | inline | `boolean` | `false` | | | item-style | `string \| object` | `undefined` | | -| justify | `'start' \| 'end'` | `'start'` | | +| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | | | size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | | | vertical | `boolean` | `false` | | | wrap | `boolean` | `true` | | diff --git a/src/space/demos/enUS/space-around.demo.md b/src/space/demos/enUS/space-around.demo.md new file mode 100644 index 000000000..beeabdf7c --- /dev/null +++ b/src/space/demos/enUS/space-around.demo.md @@ -0,0 +1,9 @@ +# Space Around + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/demos/enUS/space-between.demo.md b/src/space/demos/enUS/space-between.demo.md new file mode 100644 index 000000000..7249de44b --- /dev/null +++ b/src/space/demos/enUS/space-between.demo.md @@ -0,0 +1,11 @@ +# Space Between + +In a way, `size` doesn't work on the main axis. + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/demos/zhCN/center.demo.md b/src/space/demos/zhCN/center.demo.md new file mode 100644 index 000000000..7f9155530 --- /dev/null +++ b/src/space/demos/zhCN/center.demo.md @@ -0,0 +1,9 @@ +# 从中间 + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/demos/zhCN/index.demo-entry.md b/src/space/demos/zhCN/index.demo-entry.md index 35bde2a85..45f669928 100644 --- a/src/space/demos/zhCN/index.demo-entry.md +++ b/src/space/demos/zhCN/index.demo-entry.md @@ -8,6 +8,9 @@ basic vertical from-end +space-between +space-around +center grid-debug ``` @@ -18,7 +21,7 @@ grid-debug | align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | | | inline | `boolean` | `false` | | | item-style | `string \| object` | `undefined` | | -| justify | `'start' \| 'end'` | `'start'` | | +| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | | | size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | | | vertical | `boolean` | `false` | | | wrap | `boolean` | `true` | | diff --git a/src/space/demos/zhCN/space-around.demo.md b/src/space/demos/zhCN/space-around.demo.md new file mode 100644 index 000000000..961596139 --- /dev/null +++ b/src/space/demos/zhCN/space-around.demo.md @@ -0,0 +1,9 @@ +# 空间围绕 + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/demos/zhCN/space-between.demo.md b/src/space/demos/zhCN/space-between.demo.md new file mode 100644 index 000000000..bad6add8a --- /dev/null +++ b/src/space/demos/zhCN/space-between.demo.md @@ -0,0 +1,11 @@ +# 间隙 + +从某种以上来说, `size` 在主轴并没有用。 + +```html + + Oops! + Oops! + Oops! + +``` diff --git a/src/space/src/Space.tsx b/src/space/src/Space.tsx index 2b4be84ea..acae23e1d 100644 --- a/src/space/src/Space.tsx +++ b/src/space/src/Space.tsx @@ -16,11 +16,12 @@ type Align = | 'flex-end' | 'flex-start' +type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' const spaceProps = { ...(useTheme.props as ThemeProps), align: String as PropType, justify: { - type: String as PropType<'start' | 'end'>, + type: String as PropType, default: 'start' }, inline: Boolean, @@ -93,9 +94,11 @@ export default defineComponent({ } = this const children = flatten(getSlot(this)) const horizontalMargin = `${margin.horizontal}px` + const semiHorizontalMargin = `${margin.horizontal / 2}px` const verticalMargin = `${margin.vertical}px` const semiVerticalMargin = `${margin.vertical / 2}px` const lastIndex = children.length - 1 + const isJustifySpace = justify.startsWith('space-') return (