gpt4 book ai didi

javascript - Ant Design : How to prevent expansion when clicked on the Collapse header, 但允许使用按钮?

转载 作者:行者123 更新时间:2023-12-03 14:29:48 25 4
gpt4 key购买 nike

我正在使用 Ant 的 Collapse 组件,该组件有一个 header,其中 Collapse.Panel 上有一些文本。标题文本旁边还有一个 Button 组件。我需要仅在单击按钮时允许折叠展开,而不是在整个面板上允许折叠展开。我试图在这里描述用户界面,因为我无法发布屏幕截图。

 ____________________________________________________________
| |
|Panel Header Text <-- prevent |
|[Button] <-- allow |
|____________________________________________________________|

Ant's documentonChange 方法,但它不满足点击事件(我可以阻止它不使 Collapse exapnd)。如何限制和允许该 header 上的某些元素以允许/防止这种可折叠行为?

代码沙箱:https://codesandbox.io/s/hopeful-payne-ezpdn

最佳答案

将 header 节点更改为:

const panelHeader = (
<React.Fragment>
<Row onClick={event => event.stopPropagation()}><Col><Typography.Text>Header</Typography.Text></Col></Row>
<Button>Expand</Button>
</React.Fragment>
)

您的面板节点应该是:

<Panel showArrow={false} header={panelHeader} key="1">
<p>{text}</p>
</Panel>

并将此 CSS 添加到您的样式中:

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
padding: 0 !important;
}

.ant-btn {
position: absolute;
left: 15px;
bottom: 15px;
}

.ant-typography {
display: block;
height: 80px;
margin-left: 15px;
margin-top: 15px;
}

您应该在具有 stopPropagation 方法的 Row 中添加箭头图标节点。

关于javascript - Ant Design : How to prevent expansion when clicked on the Collapse header, 但允许使用按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60828878/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com