mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: Fixed columns z-index issue (#28346)

Browse Source 
* fix: Fixed columns z-index issue

* fix lint
This commit is contained in:
二货机器人 2020-12-14 16:04:23 +08:00 committed by GitHub
parent 17be61f2df
commit 857cbe1b23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 72 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore
View File

@ -21,8 +21,6 @@ yarn-error.log
*.snap
components/*/*.js
components/*/*.jsx
components/*/*.md
docs/**/*.md
.gitignore
.npmignore
.prettierignore

8
components/alert/index.en-US.md
View File

@ -30,7 +30,7 @@ Alert component for feedback.
### Alert.ErrorBoundary
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} | |
| Property | Description | Type | Default | Version |
| ----------- | -------------------------------- | --------- | ----------------- | ------- |
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} | |

8
components/auto-complete/index.en-US.md
View File

@ -42,10 +42,10 @@ When there is a need for autocomplete functionality.
## Methods
| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | |
| focus() | Get focus | |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | Remove focus | |
| focus() | Get focus | |
## FAQ

8
components/auto-complete/index.zh-CN.md
View File

@ -50,10 +50,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
## 方法
| 名称 | 描述 | 版本 |
| --- | --- | --- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
## FAQ

6
components/breadcrumb/index.en-US.md
View File

@ -36,9 +36,9 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
### Breadcrumb.Separator
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | Custom separator | ReactNode | `/` | |
| Property | Description | Type | Default | Version |
| -------- | ---------------- | --------- | ------- | ------- |
| children | Custom separator | ReactNode | `/` | |
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.

6
components/breadcrumb/index.zh-CN.md
View File

@ -37,9 +37,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
### Breadcrumb.Separator
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| children | 要显示的分隔符 | ReactNode | `/` | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | -------------- | --------- | ------ | ---- |
| children | 要显示的分隔符 | ReactNode | `/` | |
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。

22
components/form/index.en-US.md
View File

@ -94,7 +94,7 @@ Form field component for data bidirectional binding, validation, layout, and so
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)\[] | - | |
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | |
| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | |
| validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` | |
@ -203,9 +203,9 @@ Some operator functions in render form of Form.List.
New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item).
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| errors | Error list | ReactNode\[] | - |
| Property | Description | Type | Default |
| -------- | ----------- | ------------ | ------- |
| errors | Error list | ReactNode\[] | - |
## Form.Provider
@ -286,13 +286,13 @@ validateFields()
#### FieldData
| Name | Description | Type |
| --- | --- | --- |
| errors | Error messages | string\[] |
| name | Field name path | [NamePath](#NamePath)\[] |
| touched | Whether is operated | boolean |
| validating | Whether is in validating | boolean |
| value | Field value | any |
| Name | Description | Type |
| ---------- | ------------------------ | ------------------------ |
| errors | Error messages | string\[] |
| name | Field name path | [NamePath](#NamePath)\[] |
| touched | Whether is operated | boolean |
| validating | Whether is in validating | boolean |
| value | Field value | any |
#### Rule

30
components/form/index.zh-CN.md
View File

@ -195,19 +195,19 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
Form.List 渲染表单相关操作函数。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
| move | 移动表单项 | (from: number, to: number) => void | - |
| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 |
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------------------------------------------------- | ------------------ |
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
| move | 移动表单项 | (from: number, to: number) => void | - |
| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 |
## Form.ErrorList
4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| errors | 错误列表 | ReactNode\[] | - |
| 参数 | 说明 | 类型 | 默认值 |
| ------ | -------- | ------------ | ------ |
| errors | 错误列表 | ReactNode\[] | - |
## Form.Provider
@ -288,13 +288,13 @@ validateFields()
#### FieldData
| 名称 | 说明 | 类型 |
| --- | --- | --- |
| errors | 错误信息 | string\[] |
| name | 字段名称 | [NamePath](#NamePath)\[] |
| touched | 是否被用户操作过 | boolean |
| validating | 是否正在校验 | boolean |
| value | 字段对应值 | any |
| 名称 | 说明 | 类型 |
| ---------- | ---------------- | ------------------------ |
| errors | 错误信息 | string\[] |
| name | 字段名称 | [NamePath](#NamePath)\[] |
| touched | 是否被用户操作过 | boolean |
| validating | 是否正在校验 | boolean |
| value | 字段对应值 | any |
#### Rule

2
components/modal/index.zh-CN.md
View File

@ -127,7 +127,7 @@ browserHistory.listen(() => {
### Modal.useModal()
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。
```jsx
const [modal, contextHolder] = Modal.useModal();

10
components/table/index.en-US.md
View File

@ -147,9 +147,9 @@ One of the Table `columns` prop for describing the table's columns, Column has t
### ColumnGroup
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title of the column group | ReactNode | - |
| Property | Description | Type | Default |
| -------- | ------------------------- | --------- | ------- |
| title | Title of the column group | ReactNode | - |
### pagination
@ -300,3 +300,7 @@ In order to improve user experience, Pagination show size changer by default whe
### Why Table fully render when state change?
Table can not tell what state used in `columns.render`, so it always need fully render to avoid sync issue. You can use `column.shouldCellUpdate` to control render.
### How to handle fixed column display over the mask layout?
Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.

20
components/table/index.zh-CN.md
View File

@ -154,9 +154,9 @@ const columns = [
### ColumnGroup
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 列头显示文字 | ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ------------ | --------- | ------ |
| title | 列头显示文字 | ReactNode | - |
### pagination
@ -220,11 +220,11 @@ const columns = [
### selection
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | ReactNode | - |
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------------- | --------------------------- | ------ |
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | ReactNode | - |
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
## 在 TypeScript 中使用
@ -305,3 +305,7 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
### 为什么 更新 state 会导致全表渲染？
由于 `columns` 支持 `render` 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 `column.shouldCellUpdate` 来控制单元格的渲染。
### 固定列穿透到最上层该怎么办？
固定列通过 `z-index` 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 `z-index` 覆盖住固定列即可。

1
components/table/style/index.less
View File

@ -21,7 +21,6 @@
.@{table-prefix-cls} {
.reset-component;
position: relative;
z-index: 0;
font-size: @table-font-size;
background: @table-bg;
border-radius: @border-radius-base;

6
components/tree/index.en-US.md
View File

@ -17,7 +17,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowDrop | Whether to allow dropping on the node | ({ dropNode, dropPosition }) => boolean | - | |
| allowDrop | Whether to allow dropping on the node | ({ dropNode, dropPosition }) => boolean | - | |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |
| checkable | Add a Checkbox before the treeNodes | boolean | false | |
@ -96,8 +96,8 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t
### Tree Methods
| Name | Description |
| --- | --- |
| Name | Description |
| ----------------- | ------------------------------------ |
| scrollTo({ key }) | Scroll to key item in virtual scroll |
## FAQ

6
components/tree/index.zh-CN.md
View File

@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowDrop | 是否允许拖拽时放置在该节点 | ({ dropNode, dropPosition }) => boolean | - | |
| allowDrop | 是否允许拖拽时放置在该节点 | ({ dropNode, dropPosition }) => boolean | - | |
| autoExpandParent | 是否自动展开父节点 | boolean | false | |
| blockNode | 是否节点占据一行 | boolean | false | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |
@ -97,8 +97,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
### Tree 方法
| 名称 | 说明 |
| --- | --- |
| 名称 | 说明 |
| ----------------- | ------------------------------- |
| scrollTo({ key }) | 虚拟滚动下，滚动到指定 key 条目 |
## FAQ

3
docs/react/introduce.en-US.md
View File

@ -46,8 +46,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
Polyfills are needed for IE browsers. We recommend [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/).
> We drop support of IE8 after `antd@2.0`,
> We drop support of React 15 and IE9/10 after `antd@4.0`,
> We drop support of IE8 after `antd@2.0`, We drop support of React 15 and IE9/10 after `antd@4.0`,
## Version

3
docs/react/introduce.zh-CN.md
View File

@ -46,8 +46,7 @@ title: Ant Design of React
对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。
> `antd@2.0` 之后不再支持 IE8。
> `antd@4.0` 之后不再支持 React 15 和 IE9/10。
> `antd@2.0` 之后不再支持 IE8。 `antd@4.0` 之后不再支持 React 15 和 IE9/10。
## 版本