ngb-bootstrap ngbPanelHeader无法打开手风琴

时间:2020-04-24 16:40:19

标签: angular ng-bootstrap

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

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

My Stackblitz example

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

Çağrı

的后续回答

我发现,通过将单击事件处理程序附加到运行手风琴的toggle()函数的元素,并将<ng-panel>元素的id传递为非按钮元素,可以将其解决方案用于非按钮元素该函数的参数。我已经更新了Stackblitz,以显示如何实现。

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

后续活动与WCAG recommendations for accordion不符。这意味着很难为屏幕阅读器用户和其他一些具有辅助功能需求的用户使用。

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

焦点位于折叠面板的手风琴标题上时,展开关联的面板...

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

根据经验,标记的语义始终是选择使用哪个元素的良好指南。