diff --git a/packages/space/__tests__/space.spec.ts b/packages/space/__tests__/space.spec.ts index b5bd10cb6e..e9d248a540 100644 --- a/packages/space/__tests__/space.spec.ts +++ b/packages/space/__tests__/space.spec.ts @@ -98,4 +98,38 @@ describe('Space.vue', () => { expect(wrapper.element.children).toHaveLength(3) }) + test('fill', async () => { + const wrapper = mount(Space, { + slots: { + default: () => + Array.from({ length: 2 }).map((_, idx) => { + return `test${idx}` + }), + }, + props: { + fill: true, + }, + }) + + await nextTick() + expect(wrapper.find('.el-space').attributes('style')).toContain( + 'flex-wrap: wrap', + ) + expect(wrapper.find('.el-space__item').attributes('style')).toContain( + 'flex-grow: 1', + ) + expect(wrapper.find('.el-space__item').attributes('style')).toContain( + 'min-width: 100%', + ) + + // custom fill ratio + await wrapper.setProps({ + fillRatio: 50, + }) + + await nextTick() + expect(wrapper.find('.el-space__item').attributes('style')).toContain( + 'min-width: 50%', + ) + }) }) diff --git a/packages/space/src/useSpace.ts b/packages/space/src/useSpace.ts index c5d08c92b2..a15fe8a587 100644 --- a/packages/space/src/useSpace.ts +++ b/packages/space/src/useSpace.ts @@ -50,6 +50,16 @@ export const defaultProps = { default: false, }, + fill: { + type: Boolean, + default: false, + }, + + fillRatio: { + type: Number, + default: 100, + }, + size: { type: [String, Array, Number] as PropType< ComponentSize | [number, number] | number @@ -73,8 +83,8 @@ export function useSpace(props: ExtractPropTypes) { const verticalSize = ref(0) watch( - () => [props.size, props.wrap, props.direction], - ([size = 'small', wrap, dir]) => { + () => [props.size, props.wrap, props.direction, props.fill], + ([size = 'small', wrap, dir, fill]) => { // when the specified size have been given if (isArray(size)) { const [h = 0, v = 0] = size @@ -88,7 +98,7 @@ export function useSpace(props: ExtractPropTypes) { val = SizeMap[size as string] || SizeMap.small } - if (wrap && dir === 'horizontal') { + if ((wrap || fill) && dir === 'horizontal') { horizontalSize.value = verticalSize.value = val } else { if (dir === 'horizontal') { @@ -105,9 +115,10 @@ export function useSpace(props: ExtractPropTypes) { ) const containerStyle = computed(() => { - const wrapKls: CSSProperties = props.wrap - ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` } - : null + const wrapKls: CSSProperties = + props.wrap || props.fill + ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` } + : null const alignment: CSSProperties = { alignItems: props.alignment, } @@ -115,10 +126,16 @@ export function useSpace(props: ExtractPropTypes) { }) const itemStyle = computed(() => { - return { + const itemBaseStyle = { paddingBottom: `${verticalSize.value}px`, marginRight: `${horizontalSize.value}px`, } + + const fillStyle = props.fill + ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } + : null + + return [itemBaseStyle, fillStyle] as Array }) return { diff --git a/website/docs/en-US/space.md b/website/docs/en-US/space.md index 332172bc5c..d731cf2aba 100644 --- a/website/docs/en-US/space.md +++ b/website/docs/en-US/space.md @@ -269,6 +269,91 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va ``` ::: +### Fill the container + +Through the `fill` **(Boolean type)** parameter, you can control whether the child node automatically fills the container. + +In the following example, when set to `fill`, the width of the child node will automatically adapt to the width of the container. + +:::demo Use fill to automatically fill the container with child nodes + +```html + + + +``` +::: + +You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`. + +It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example. + +:::demo Use fillRatio to customize the fill ratio + +```html + + + +``` +::: + ### Space Attributes | Attribute | Description | Type | Available value | Default | @@ -281,7 +366,9 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va | spacer | Spacer | string / number / VNode | - | - | | size | Spacing size | string / number / [number, number] | - | 'small' | | wrap | Auto wrapping | boolean | true / false | false | -### Space Slots -| Name | Description | +| fill | Whether to fill the container | boolean | true / false | false | +| fillRatio | Ratio of fill | number | - | 100 | +### Space Slot +| name | description | |----|----| | default | Items to be spaced | diff --git a/website/docs/es/space.md b/website/docs/es/space.md index a0c54d899a..c2c40dfee9 100644 --- a/website/docs/es/space.md +++ b/website/docs/es/space.md @@ -269,6 +269,91 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va ``` ::: +### Fill the container + +Through the `fill` **(Boolean type)** parameter, you can control whether the child node automatically fills the container. + +In the following example, when set to `fill`, the width of the child node will automatically adapt to the width of the container. + +:::demo Use fill to automatically fill the container with child nodes + +```html + + + +``` +::: + +You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`. + +It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example. + +:::demo Use fillRatio to customize the fill ratio + +```html + + + +``` +::: + ### Space Attributes | Attribute | Description | Type | Available value | Defaults | @@ -281,6 +366,8 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va | spacer | Spacer | string / number / VNode | - | - | | size | Spacing size | string / number / [number, number] | - | 'small' | | wrap | Auto wrapping | boolean | true / false | false | +| fill | Whether to fill the container | boolean | true / false | false | +| fillRatio | Ratio of fill | number | - | 100 | ### Space Slot | name | description | |----|----| diff --git a/website/docs/fr-FR/space.md b/website/docs/fr-FR/space.md index a0c54d899a..c2c40dfee9 100644 --- a/website/docs/fr-FR/space.md +++ b/website/docs/fr-FR/space.md @@ -269,6 +269,91 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va ``` ::: +### Fill the container + +Through the `fill` **(Boolean type)** parameter, you can control whether the child node automatically fills the container. + +In the following example, when set to `fill`, the width of the child node will automatically adapt to the width of the container. + +:::demo Use fill to automatically fill the container with child nodes + +```html + + + +``` +::: + +You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`. + +It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example. + +:::demo Use fillRatio to customize the fill ratio + +```html + + + +``` +::: + ### Space Attributes | Attribute | Description | Type | Available value | Defaults | @@ -281,6 +366,8 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va | spacer | Spacer | string / number / VNode | - | - | | size | Spacing size | string / number / [number, number] | - | 'small' | | wrap | Auto wrapping | boolean | true / false | false | +| fill | Whether to fill the container | boolean | true / false | false | +| fillRatio | Ratio of fill | number | - | 100 | ### Space Slot | name | description | |----|----| diff --git a/website/docs/jp/space.md b/website/docs/jp/space.md index a0c54d899a..c2c40dfee9 100644 --- a/website/docs/jp/space.md +++ b/website/docs/jp/space.md @@ -269,6 +269,91 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va ``` ::: +### Fill the container + +Through the `fill` **(Boolean type)** parameter, you can control whether the child node automatically fills the container. + +In the following example, when set to `fill`, the width of the child node will automatically adapt to the width of the container. + +:::demo Use fill to automatically fill the container with child nodes + +```html + + + +``` +::: + +You can also use the `fillRatio` parameter to customize the filling ratio. The default value is `100`, which represents filling based on the width of the parent container at `100%`. + +It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example. + +:::demo Use fillRatio to customize the fill ratio + +```html + + + +``` +::: + ### Space Attributes | Attribute | Description | Type | Available value | Defaults | @@ -281,6 +366,8 @@ Setting this attribute can adjust the alignment of child nodes, the desirable va | spacer | Spacer | string / number / VNode | - | - | | size | Spacing size | string / number / [number, number] | - | 'small' | | wrap | Auto wrapping | boolean | true / false | false | +| fill | Whether to fill the container | boolean | true / false | false | +| fillRatio | Ratio of fill | number | - | 100 | ### Space Slot | name | description | |----|----| diff --git a/website/docs/zh-CN/space.md b/website/docs/zh-CN/space.md index b1a83e1fae..2b0f783835 100644 --- a/website/docs/zh-CN/space.md +++ b/website/docs/zh-CN/space.md @@ -269,6 +269,91 @@ export default { ``` ::: +### 自动填充容器 + +通过 `fill` **(布尔类型)** 参数可以控制子节点是否自动填充容器 + +下面的例子中，当设置为 `fill` 时，子节点的宽度会自动适配容器的宽度 + +:::demo 用 fill 让子节点自动填充容器 + +```html + + + +``` +::: + +也可以使用 `fillRatio` 参数，自定义填充的比例，默认值为 `100`，代表基于父容器宽度的 `100%` 进行填充 + +需要注意的是，水平布局和垂直布局的表现形式稍有不同，具体的效果可以查看下面的例子 + +:::demo 用 fillRatio 自定义填充比例 + +```html + + + +``` +::: + ### Space Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -281,6 +366,8 @@ export default { | spacer | 间隔符 | string / number / VNode | - | - | | size | 间隔大小 | string / number / [number, number] | - | 'small' | | wrap | 设置是否自动折行 | boolean | true / false | false | +| fill | 子元素是否填充父容器 | boolean | true / false | false | +| fillRatio | 填充父容器的比例 | number | - | 100 | ### Space Slot | name | 说明 | |----|----|