mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

docs: Layout and Affix clean version (#19844)

Browse Source
This commit is contained in:
鬼厉 2019-11-21 10:24:22 +08:00 committed by 二货机器人
parent 34412e98d6
commit 209e293fae
4 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/affix/index.en-US.md
View File

@ -14,12 +14,12 @@ Please note that Affix should not cover other content on the page, especially wh
## API
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | |
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | |
| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window | |
| onChange | Callback for when Affix state is changed | Function(affixed) | - | |
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
| onChange | Callback for when Affix state is changed | Function(affixed) | - |
**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:

12
components/affix/index.zh-CN.md
View File

@ -15,12 +15,12 @@ title: Affix
## API
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

42
components/layout/index.en-US.md
View File

@ -73,11 +73,11 @@ Style of a navigation should conform to its level.
The wrapper.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | container className | string | - | |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - | 3.2.0 |
| style | to customize the styles | object | - | |
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| className | container className | string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | to customize the styles | object | - |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -85,22 +85,22 @@ The wrapper.
The sidebar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| breakpoint | [breakpoints](/components/grid#Col) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| className | container className | string | - | |
| collapsed | to set the current status | boolean | - | |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 | |
| collapsible | whether can be collapsed | boolean | false | |
| defaultCollapsed | to set the initial status | boolean | false | |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false | |
| style | to customize the styles | object | - | |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` | 3.6.0 |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - | |
| width | width of the sidebar | number\|string | 200 | |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | |
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#API) changed | (broken) => {} | - | 3.7.0 |
| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | 3.24.0 |
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| breakpoint | [breakpoints](/components/grid#Col) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| className | container className | string | - |
| collapsed | to set the current status | boolean | - |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
| collapsible | whether can be collapsed | boolean | false |
| defaultCollapsed | to set the initial status | boolean | false |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | to customize the styles | object | - |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
| width | width of the sidebar | number\|string | 200 |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#API) changed | (broken) => {} | - |
| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
#### breakpoint width

42
components/layout/index.zh-CN.md
View File

@ -74,11 +74,11 @@ title: Layout
布局容器。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 容器 className | string | - | |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | 3.2.0 |
| style | 指定样式 | object | - | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 容器 className | string | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
| style | 指定样式 | object | - |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
@ -86,22 +86,22 @@ title: Layout
侧边栏。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid-cn/#Col) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| className | 容器 className | string | - | |
| collapsed | 当前收起状态 | boolean | - | |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | |
| collapsible | 是否可收起 | boolean | false | |
| defaultCollapsed | 是否默认收起 | boolean | false | |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
| style | 指定样式 | object | - | |
| theme | 主题颜色 | string: `light` `dark` | `dark` | 3.6.0 |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - | |
| width | 宽度 | number\|string | 200 | |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | |
| onBreakpoint | 触发响应式布局[断点](/components/grid#API)时的回调 | (broken) => {} | - | 3.7.0 |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | 3.24.0 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid-cn/#Col) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| className | 容器 className | string | - |
| collapsed | 当前收起状态 | boolean | - |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object | - |
| theme | 主题颜色 | string: `light` `dark` | `dark` |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| onBreakpoint | 触发响应式布局[断点](/components/grid#API)时的回调 | (broken) => {} | - |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
#### breakpoint width