Vaadin Accordion with Button 总结

Question

在我的 Vaadin 14 应用程序中，我想添加一个 Accordion 组件，该组件在其摘要（始终显示）中包含多个组件，其中有一个 Button。单击摘要通常会切换 AccordionPanel 内容的显示。单击摘要中的按钮时，如何防止 AccordionPanel 变为 collapse/expand？

对象的创建简单如下：

Accordion accordion = new Accordion();

MyPanel panel = new MyPanel();

accordion.add(panel);

使用 MyPanel 构造函数只需调用 setSummary() 并使用包含按钮的布局。

Answer 1

将此添加到您的视图中：

    UI.getCurrent().getPage()
    .executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");

将禁用对所有手风琴切换和手风琴摘要的所有点击。但是，您需要包含一个按钮或触发器来打开和关闭手风琴。不知道这是不是你想要的？

Answer 2

我找到了答案in this thread on the forum。

事实证明，您可以使用此 hack 阻止按钮点击的传播：

button.getElement().addEventListener("click", click -> {
        //do nothing
}).addEventData("event.stopPropagation()");

这似乎是框架应该提供的开箱即用的核心功能，但 this ticket 仍然开放。

Vaadin Accordion with Button 总结

Vaadin Accordion with Button in summary

vaadin

vaadin-flow

vaadin14