ngb-bootstrap ngbPanelHeader 不打开手风琴



我正在寻找一种方法,让ngbPanelHeader触发ngb-accordion内部的内容来打开/关闭。手风琴似乎要求标题作为内容打开/关闭的触发器。

例如,如果<ngb-panel>内的<ng-template>(位于<ngb-accordion>内(被赋予ngbPanelTitle属性,则它将成功触发手风琴打开/关闭其内容。但是,如果同一个<ng-template>具有ngbPanelHeader属性,则不会。

我的Stacklitz示例

任何解决方法的建议都将不胜感激!

Çağrı回答的后续行动

我发现,他的解决方案可以与非按钮元素一起使用,方法是将一个点击事件处理程序附加到运行手风琴的toggle((函数的元素上,并将<ng-panel>元素的id作为参数传递给该函数。我已经更新了Stacklitz来展示如何实现它。

https://stackblitz.com/edit/angular-te1eyn

ngbPanelTitle可以作为ng-bootsrap的默认模板,对于您的自定义模板,您需要将ngbPanel Toggle添加到元素中

<button ngbPanelToggle >Panel Header That Doesn't Open Panel Content</button>

随访不符合WCAG关于手风琴的建议。这意味着它将很难用于屏幕阅读器用户和其他有无障碍需求的用户。

每个手风琴标头的标题都包含在一个带有角色按钮的元素中。

焦点在折叠面板的手风琴式标题上时,展开关联的面板。。。

使用按钮元素至少有两个原因。很可能还有更多。

根据经验,标签的语义在选择使用哪个元素时总是一个很好的指南。

相关内容

  • 没有找到相关文章

最新更新