mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
feat: add icon to collapsible (#37566)
* feat: add icon to collapsible in collapse * fix: typo * Apply suggestions from code review * test: update snapshot of collapsible.md * feat: edit api support version * feat: edit api support version * fix: reinstall modules and update snapshots Co-authored-by: yangchen7 <yangchen7@360.cn> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
杨腿_
GitHub
parent
92a3c719dc
commit
0054ff9dfd
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
export type CollapsibleType = 'header' | 'disabled';
|
||||
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
||||
|
||||
export interface CollapsePanelProps {
|
||||
key: string | number;
|
||||
|
||||
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="transform: rotate(90deg);"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This panel can only be collapsed by clicking icon
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-content ant-collapse-content-active"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p>
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
|
||||
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="transform: rotate(90deg);"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This panel can only be collapsed by clicking icon
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-content ant-collapse-content-active"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
<p>
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
|
||||
@ -32,6 +32,11 @@ const App: React.FC = () => (
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Collapse collapsible="icon" defaultActiveKey={['1']}>
|
||||
<Panel header="This panel can only be collapsed by clicking icon" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Collapse collapsible="disabled">
|
||||
<Panel header="This panel can't be collapsed" key="1">
|
||||
<p>{text}</p>
|
||||
|
||||
@ -22,7 +22,7 @@ A content area which can be collapsed and expanded.
|
||||
| accordion | If true, Collapse renders as Accordion | boolean | false | |
|
||||
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
|
||||
| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
@ -34,9 +34,9 @@ A content area which can be collapsed and expanded.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | The extra element in the corner | ReactNode | - | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
|
||||
| header | Title of the panel | ReactNode | - | |
|
||||
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
|
||||
| showArrow | If false, panel will not show arrow icon | boolean | true | |
|
||||
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
|
||||
|
||||
@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| accordion | 手风琴模式 | boolean | false | |
|
||||
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
@ -33,11 +33,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头 | boolean | true | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | ReactNode | - | |
|
||||
| key | 对应 activeKey | string \| number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
|
||||
|
||||
@ -64,6 +64,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-icon-collapsible-only {
|
||||
cursor: default;
|
||||
.@{collapse-prefix-cls}-expand-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
padding-left: @padding-sm;
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
"moment": "^2.29.2",
|
||||
"rc-cascader": "~3.7.0",
|
||||
"rc-checkbox": "~2.3.0",
|
||||
"rc-collapse": "~3.3.0",
|
||||
"rc-collapse": "~3.4.2",
|
||||
"rc-dialog": "~8.9.0",
|
||||
"rc-drawer": "~5.1.0",
|
||||
"rc-dropdown": "~4.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user