mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: Add FAQ about open (#37420)
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
00a53e8648
commit
aca046288e
@ -45,7 +45,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - | |
|
||||
| size | presetted size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
|
||||
| title | The title for Drawer | ReactNode | - | |
|
||||
| open | Whether the Drawer dialog is visible or not | boolean | false | 4.23.0 |
|
||||
| open | Whether the Drawer dialog is visible or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
|
||||
| width | Width of the Drawer dialog | string \| number | 378 | |
|
||||
| zIndex | The `z-index` of the Drawer | number | 1000 | |
|
||||
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - | |
|
||||
|
||||
@ -44,7 +44,7 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
|
||||
| size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
|
||||
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - | |
|
||||
| title | 标题 | ReactNode | - | |
|
||||
| open | Drawer 是否可见 | boolean | - | 4.23.0 |
|
||||
| open | Drawer 是否可见，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
|
||||
| width | 宽度 | string \| number | 378 | |
|
||||
| zIndex | 设置 Drawer 的 `z-index` | number | 1000 | |
|
||||
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
||||
|
||||
@ -27,8 +27,8 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
| overlayStyle | The style of the dropdown root element | CSSProperties | - | |
|
||||
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - | 4.23.0 |
|
||||
| open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
|
||||
| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
|
||||
|
||||
@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
| trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| open | 菜单是否显示 | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - | 4.23.0 |
|
||||
| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#why-open)） | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
|
||||
|
||||
@ -56,4 +56,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
| type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` | |
|
||||
| open | 菜单是否显示 | boolean | - | 4.23.0 |
|
||||
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - | |
|
||||
| onOpenChange | 菜单显示状态改变时调用，参数为 `visible` | (open: boolean) => void | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用 | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
@ -38,7 +38,7 @@ When requiring users to interact with the application, but without jumping to a
|
||||
| okType | Button `type` of the OK button | string | `primary` | |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | |
|
||||
| title | The modal dialog's title | ReactNode | - | |
|
||||
| open | Whether the modal dialog is visible or not | boolean | false | 4.23.0 |
|
||||
| open | Whether the modal dialog is visible or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
|
||||
| width | Width of the modal dialog | string \| number | 520 | |
|
||||
| wrapClassName | The class name of the container of the modal dialog | string | - | |
|
||||
| zIndex | The `z-index` of the Modal | number | 1000 | |
|
||||
|
||||
@ -41,7 +41,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
| okType | 确认按钮类型 | string | `primary` | |
|
||||
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | |
|
||||
| title | 标题 | ReactNode | - | |
|
||||
| open | 对话框是否可见 | boolean | - | 4.23.0 |
|
||||
| open | 对话框是否可见，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
|
||||
| width | 宽度 | string \| number | 520 | |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - | |
|
||||
| zIndex | 设置 Modal 的 `z-index` | number | 1000 | |
|
||||
|
||||
@ -38,7 +38,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
| overlayInnerStyle | Style of the tooltip inner content | object | - | |
|
||||
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
|
||||
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array<string> | `hover` | |
|
||||
| open | Whether the floating tooltip card is open or not | boolean | false | 4.23.0 |
|
||||
| open | Whether the floating tooltip card is open or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
|
||||
| zIndex | Config `z-index` of Tooltip | number | - | |
|
||||
| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open) => void | - | 4.23.0 |
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
|
||||
| overlayInnerStyle | 卡片内容区域的样式对象 | object | - | |
|
||||
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
|
||||
| trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` | |
|
||||
| open | 用于手动控制浮层显隐 | boolean | false | 4.23.0 |
|
||||
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | false | 4.23.0 |
|
||||
| zIndex | 设置 Tooltip 的 `z-index` | number | - | |
|
||||
| onOpenChange | 显示隐藏的回调 | (open) => void | - | 4.23.0 |
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ import { Table } from 'antd';
|
||||
|
||||
type Props<T extends (...args: any) => any> = Parameters<T>[0];
|
||||
|
||||
type TableProps = Props<typeof Table<{ key: string, name: string, age: number }>>;
|
||||
type TableProps = Props<typeof Table<{ key: string; name: string; age: number }>>;
|
||||
type DataSource = TableProps['dataSource'];
|
||||
```
|
||||
|
||||
@ -168,6 +168,12 @@ ConfigProvider.config({
|
||||
|
||||
You should only access the API by official doc with ref. Directly access internal `props` or `state` is not recommended which will make your code strong coupling with current version. Any refactor will break your code like refactor with [Hooks](https://reactjs.org/docs/hooks-intro.html) version, delete or rename internal `props` or `state`, adjust internal node constructor, etc.
|
||||
|
||||
<div id="why-open"></div>
|
||||
|
||||
## Why we need align pop component with `open` prop?
|
||||
|
||||
For historical reasons, the display names of the pop components are not uniform, and both `open` and `visible` are used. This makes the memory cost that non-tsx users encounter when developing. It also leads to ambiguity about what name to choose when adding a feature. So we want to unify the attribute name, you can still use the original `visible` and it will still be backward compatible, but we will remove this attribute from the documentation as of v5.
|
||||
|
||||
## How to spell Ant Design correctly?
|
||||
|
||||
- ✅ **Ant Design**: Capitalized with space, for the design language.
|
||||
|
||||
@ -122,7 +122,7 @@ import { Table } from 'antd';
|
||||
|
||||
type Props<T extends (...args: any) => any> = Parameters<T>[0];
|
||||
|
||||
type TableProps = Props<typeof Table<{ key: string, name: string, age: number }>>;
|
||||
type TableProps = Props<typeof Table<{ key: string; name: string; age: number }>>;
|
||||
type DataSource = TableProps['dataSource'];
|
||||
```
|
||||
|
||||
@ -188,6 +188,12 @@ ConfigProvider.config({
|
||||
|
||||
你通过 ref 获得引用时只应该使用文档提供的方法。直接读取组件内部的 `props` 和 `state` 不是一个好的设计，这会使你的代码与组件版本强耦合。任何重构都可能会使你的代码无法工作，其中重构包括且不仅限于改造成 [Hooks](https://reactjs.org/docs/hooks-intro.html) 版本、移除 / 更名内部 `props` 与 `state`、调整内部 React 节点结构等等。
|
||||
|
||||
<div id="why-open"></div>
|
||||
|
||||
## 弹层类组件为什么要统一至 `open` 属性？
|
||||
|
||||
因为历史原因，弹层类组件展示命名并不统一，出现了 `open` 与 `visible` 都在使用的情况。这使得非 tsx 用户在开发时遭遇的记忆成本。同样导致新增 feature 时选择何种命名的模棱两可。因而我们希望统一该属性命名，你仍然可以使用原本的 `visible` 它仍然会向下兼容，但是从 v5 起我们将从文档中移除该属性。
|
||||
|
||||
## 如何正确的拼写 Ant Design？
|
||||
|
||||
- ✅ **Ant Design**：用空格分隔的首字母大写单词，指代设计语言。
|
||||
|
||||
@ -195,6 +195,14 @@ class MainContent extends Component {
|
||||
handleLoad = () => {
|
||||
if (window.location.hash) {
|
||||
updateActiveToc(window.location.hash.replace(/^#/, ''));
|
||||
|
||||
// 有时候不滚动，强制触发一次滚动逻辑
|
||||
setTimeout(() => {
|
||||
const target = document.querySelector(window.location.hash);
|
||||
if (target) {
|
||||
target.scrollIntoView();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
this.bindScroller();
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user