Skip to content

Commit

Permalink
feat(grid): add strictAutoFit option (#2403)
Browse files Browse the repository at this point in the history 
* feat(grid): add strictAutoFit option

* feat(grid): change strictAutoFit default value

* feat(grid): reverse the meaning of strictAutoFit

* docs(antd/next/element): add strictAutoFit description for FormGrid
  • Loading branch information
@liuweiGL
liuweiGL committed Nov 8, 2021
1 parent 18a09d4 commit 56a39c4
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 54 deletions.
21 changes: 11 additions & 10 deletions packages/antd/docs/components/FormGrid.md
View file
Expand Up @@ -338,16 +338,17 @@ export default () => {

### FormGrid

| Property name | Type | Description | Default value |
| ------------- | -------------------- | -------------------------- | ----------------- |
| minWidth | `number \| number[]` | Minimum element width | 100 |
| maxWidth | `number \| number[]` | Maximum element width | - |
| minColumns | `number \| number[]` | Minimum number of columns | 0 |
| maxColumns | `number \| number[]` | Maximum number of columns | - |
| breakpoints | number[] | Container size breakpoints | `[720,1280,1920]` |
| columnGap | number | Column spacing | 8 |
| rowGap | number | Row spacing | 4 |
| colWrap | boolean | Wrap | true |
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ------------------------------------- | ----------------- |
| minWidth | `number \| number[]` | Minimum element width | 100 |
| maxWidth | `number \| number[]` | Maximum element width | - |
| minColumns | `number \| number[]` | Minimum number of columns | 0 |
| maxColumns | `number \| number[]` | Maximum number of columns | - |
| breakpoints | number[] | Container size breakpoints | `[720,1280,1920]` |
| columnGap | number | Column spacing | 8 |
| rowGap | number | Row spacing | 4 |
| colWrap | boolean | Wrap | true |
| strictAutoFit | boolean | Is width strictly limited by maxWidth | false |

note:

Expand Down
21 changes: 11 additions & 10 deletions packages/antd/docs/components/FormGrid.zh-CN.md
View file
Expand Up @@ -338,16 +338,17 @@ export default () => {

### FormGrid

| 属性名 | 类型 | 描述 | 默认值 |
| ----------- | -------------------- | ------------ | ----------------- |
| minWidth | `number \| number[]` | 元素最小宽度 | 100 |
| maxWidth | `number \| number[]` | 元素最大宽度 | - |
| minColumns | `number \| number[]` | 最小列数 | 0 |
| maxColumns | `number \| number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 8 |
| rowGap | number | 行间距 | 4 |
| colWrap | boolean | 自动换行 | true |
| 属性名 | 类型 | 描述 | 默认值 |
| ------------- | -------------------- | -------------------------------------------------------------- | ----------------- |
| minWidth | `number \| number[]` | 元素最小宽度 | 100 |
| maxWidth | `number \| number[]` | 元素最大宽度 | - |
| minColumns | `number \| number[]` | 最小列数 | 0 |
| maxColumns | `number \| number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 8 |
| rowGap | number | 行间距 | 4 |
| colWrap | boolean | 自动换行 | true |
| strictAutoFit | boolean | GridItem 宽度是否严格受限于 maxWidth，不受限的话会自动占满容器 | false |

注意：

Expand Down
21 changes: 11 additions & 10 deletions packages/element/docs/guide/form-grid.md
View file
Expand Up @@ -18,16 +18,17 @@

### FormGrid

| 属性名 | 类型 | 描述 | 默认值 |
| ----------- | ------------------- | ------------ | ----------------- |
| minWidth | `number / number[]` | 元素最小宽度 | 100 |
| maxWidth | `number / number[]` | 元素最大宽度 | - |
| minColumns | `number / number[]` | 最小列数 | 0 |
| maxColumns | `number / number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 8 |
| rowGap | number | 行间距 | 4 |
| colWrap | boolean | 自动换行 | true |
| 属性名 | 类型 | 描述 | 默认值 |
| ------------- | ------------------- | -------------------------------------------------------------- | ----------------- |
| minWidth | `number / number[]` | 元素最小宽度 | 100 |
| maxWidth | `number / number[]` | 元素最大宽度 | - |
| minColumns | `number / number[]` | 最小列数 | 0 |
| maxColumns | `number / number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 8 |
| rowGap | number | 行间距 | 4 |
| colWrap | boolean | 自动换行 | true |
| strictAutoFit | boolean | GridItem 宽度是否严格受限于 maxWidth，不受限的话会自动占满容器 | false |

注意：

Expand Down
13 changes: 9 additions & 4 deletions packages/grid/src/index.ts
View file
Expand Up @@ -9,6 +9,7 @@ export interface IGridOptions {
columnGap?: number
rowGap?: number
colWrap?: boolean
strictAutoFit?: boolean
}

const SpanRegExp = /span\s*(\d+)/
Expand Down Expand Up @@ -99,6 +100,7 @@ export class Grid<Container extends HTMLElement> {
rowGap: 4,
minWidth: 100,
colWrap: true,
strictAutoFit: false,
...options,
}
define(this, {
Expand Down Expand Up @@ -200,10 +202,13 @@ export class Grid<Container extends HTMLElement> {
if (this.maxWidth === Infinity) {
return `repeat(${this.columns},1fr)`
}
const columnWidth =
(this.width - (this.columns - 1) * this.columnGap) / this.columns
if (columnWidth < this.minWidth || columnWidth > this.maxWidth)
return `repeat(${this.columns},1fr)`
if (this.options.strictAutoFit !== true) {
const columnWidth =
(this.width - (this.columns - 1) * this.columnGap) / this.columns
if (columnWidth < this.minWidth || columnWidth > this.maxWidth) {
return `repeat(${this.columns},1fr)`
}
}
return `repeat(${this.columns},minmax(${this.minWidth}px,${this.maxWidth}px))`
}

Expand Down
21 changes: 11 additions & 10 deletions packages/next/docs/components/FormGrid.md
View file
Expand Up @@ -338,16 +338,17 @@ export default () => {

### FormGrid

| Property name | Type | Description | Default value |
| ------------- | -------------------- | -------------------------- | ----------------- |
| minWidth | `number \| number[]` | Minimum element width | 100 |
| maxWidth | `number \| number[]` | Maximum element width | - |
| minColumns | `number \| number[]` | Minimum number of columns | 0 |
| maxColumns | `number \| number[]` | Maximum number of columns | - |
| breakpoints | number[] | Container size breakpoints | `[720,1280,1920]` |
| columnGap | number | Column spacing | 10 |
| rowGap | number | Row spacing | 5 |
| colWrap | boolean | Wrap | true |
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ------------------------------------- | ----------------- |
| minWidth | `number \| number[]` | Minimum element width | 100 |
| maxWidth | `number \| number[]` | Maximum element width | - |
| minColumns | `number \| number[]` | Minimum number of columns | 0 |
| maxColumns | `number \| number[]` | Maximum number of columns | - |
| breakpoints | number[] | Container size breakpoints | `[720,1280,1920]` |
| columnGap | number | Column spacing | 10 |
| rowGap | number | Row spacing | 5 |
| colWrap | boolean | Wrap | true |
| strictAutoFit | boolean | Is width strictly limited by maxWidth | false |

note:

Expand Down
21 changes: 11 additions & 10 deletions packages/next/docs/components/FormGrid.zh-CN.md
View file
Expand Up @@ -338,16 +338,17 @@ export default () => {

### FormGrid

| 属性名 | 类型 | 描述 | 默认值 |
| ----------- | -------------------- | ------------ | ----------------- |
| minWidth | `number \| number[]` | 元素最小宽度 | 100 |
| maxWidth | `number \| number[]` | 元素最大宽度 | - |
| minColumns | `number \| number[]` | 最小列数 | 0 |
| maxColumns | `number \| number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 10 |
| rowGap | number | 行间距 | 5 |
| colWrap | boolean | 自动换行 | true |
| 属性名 | 类型 | 描述 | 默认值 |
| ------------- | -------------------- | -------------------------------------------------------------- | ----------------- |
| minWidth | `number \| number[]` | 元素最小宽度 | 100 |
| maxWidth | `number \| number[]` | 元素最大宽度 | - |
| minColumns | `number \| number[]` | 最小列数 | 0 |
| maxColumns | `number \| number[]` | 最大列数 | - |
| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
| columnGap | number | 列间距 | 10 |
| rowGap | number | 行间距 | 5 |
| colWrap | boolean | 自动换行 | true |
| strictAutoFit | boolean | GridItem 宽度是否严格受限于 maxWidth，不受限的话会自动占满容器 | false |

注意：

Expand Down

0 comments on commit 56a39c4

Please sign in to comment.