GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

* fix: Fixed columns z-index issue

* fix lint
pull/28354/head
二货机器人 4 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .prettierignore
  2. 8
      components/alert/index.en-US.md
  3. 8
      components/auto-complete/index.en-US.md
  4. 8
      components/auto-complete/index.zh-CN.md
  5. 6
      components/breadcrumb/index.en-US.md
  6. 6
      components/breadcrumb/index.zh-CN.md
  7. 22
      components/form/index.en-US.md
  8. 30
      components/form/index.zh-CN.md
  9. 2
      components/modal/index.zh-CN.md
  10. 10
      components/table/index.en-US.md
  11. 20
      components/table/index.zh-CN.md
  12. 1
      components/table/style/index.less
  13. 6
      components/tree/index.en-US.md
  14. 6
      components/tree/index.zh-CN.md
  15. 3
      docs/react/introduce.en-US.md
  16. 3
      docs/react/introduce.zh-CN.md

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。
## 版本

Write Preview
Loading…
Cancel
Save