mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
feat: add ghost prop for collapse (#24734)
* feat: add ghost prop for collapse * doc: version of collapse's ghost prop * refactor: make ghost collapse's less code to a nested style * chore: remove redundant codes in ghost collapse's less & doc * doc: add a background wrapper for ghost collapse demo * doc: dark-theme wrapper bg-color for ghost collapse demo * test: update snapshot of ghost collapse * doc: use softer bg-color on ghost collapse demo * doc: remove disabled panel in ghost collapse demo
This commit is contained in:
07akioni
GitHub
parent
d1bdaee607
commit
c2beed8bd3
@ -23,6 +23,7 @@ export interface CollapseProps {
|
||||
prefixCls?: string;
|
||||
expandIcon?: (panelProps: PanelProps) => React.ReactNode;
|
||||
expandIconPosition?: ExpandIconPosition;
|
||||
ghost?: boolean;
|
||||
}
|
||||
|
||||
interface PanelProps {
|
||||
@ -42,7 +43,7 @@ interface CollapseInterface extends React.FC<CollapseProps> {
|
||||
|
||||
const Collapse: CollapseInterface = props => {
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const { prefixCls: customizePrefixCls, className = '', bordered } = props;
|
||||
const { prefixCls: customizePrefixCls, className = '', bordered, ghost } = props;
|
||||
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
|
||||
|
||||
const getIconPosition = () => {
|
||||
@ -72,6 +73,7 @@ const Collapse: CollapseInterface = props => {
|
||||
[`${prefixCls}-borderless`]: !bordered,
|
||||
[`${prefixCls}-icon-position-${iconPosition}`]: true,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-ghost`]: !!ghost,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
@ -718,6 +718,129 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
|
||||
<div
|
||||
class="site-collapse-ghost-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-left ant-collapse-ghost"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="-ms-transform:rotate(90deg);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>
|
||||
This is panel header 1
|
||||
</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
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
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>
|
||||
This is panel header 2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
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>
|
||||
This is panel header 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-left"
|
||||
|
||||
50
components/collapse/demo/ghost.md
Normal file
50
components/collapse/demo/ghost.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 幽灵折叠面板
|
||||
en-US: Ghost Collapse
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
将折叠面板的背景变成透明。
|
||||
|
||||
## en-US
|
||||
|
||||
Making collapse's background to transparent.
|
||||
|
||||
```jsx
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const text = `
|
||||
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.
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="site-collapse-ghost-wrapper">
|
||||
<Collapse defaultActiveKey={['1']} ghost>
|
||||
<Panel header="This is panel header 1" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header="This is panel header 2" key="2">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header="This is panel header 3" key="3">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
.site-collapse-ghost-wrapper {
|
||||
padding: 26px 16px 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
@ -27,6 +27,7 @@ A content area which can be collapsed and expanded.
|
||||
| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | Set expand icon position | `left` \| `right` | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |
|
||||
| ghost | make the collapse borderless and its background transparent | boolean | `false` | 4.4.0 |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
@ -38,3 +39,9 @@ A content area which can be collapsed and expanded.
|
||||
| key | Unique key identifying the panel from among its siblings | string\|number | - | |
|
||||
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` | |
|
||||
| extra | extra element in the corner | ReactNode | - | |
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-collapse-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,6 +28,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | 设置图标位置 | `left` \| `right` | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
|
||||
| ghost | 使折叠面板透明且无边框 | boolean | `false` | 4.4.0 |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
@ -39,3 +40,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| key | 对应 activeKey | string\|number | 无 | |
|
||||
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-collapse-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -125,6 +125,24 @@
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-ghost {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
> .@{collapse-prefix-cls}-item {
|
||||
border-bottom: 0;
|
||||
&:last-child {
|
||||
border-radius: 0;
|
||||
.@{collapse-prefix-cls}-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
> .@{collapse-prefix-cls}-content {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& &-item-disabled > &-header {
|
||||
&,
|
||||
& > .arrow {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user