ngb-bootstrap ngbPanelHeader 不打开手风琴
ngb-bootstrap ngbPanelHeader Doesn't Open Accordion
我正在寻找一种方法让 ngbPanelHeader 触发 ngb-accordion 到 open/close 中的内容。似乎手风琴要求标题是内容 open/close.
的触发器
例如，如果 <ngb-panel> 中的 <ng-template>（在 <ngb-accordion> 中）被赋予 ngbPanelTitle 属性，它将成功触发手风琴open/close 它的内容。但是，如果相同的 <ng-template> 具有 ngbPanelHeader 属性，则不会。
如有任何解决方法的建议，我们将不胜感激！
Follow-up 由 Çağrı
给出的答案
我发现他的解决方案可以与 non-button 元素一起使用，方法是将 click-event 处理程序附加到运行手风琴的 toggle() 函数的元素，并传递 non-button 元素的 id =19=] 元素作为该函数的参数。我已经更新了 Stackblitz 以展示如何实现它。
https://stackblitz.com/edit/angular-te1eyn
ngbPanelTitle 可以作为 ng-bootsrap 的默认设置，对于您的自定义模板，您需要将 ngbPanelToggle 添加到您的元素
<button ngbPanelToggle >Panel Header That Doesn't Open Panel Content</button>
跟进与WCAG recommendations for accordion不符。这意味着它很难用于屏幕 reader 用户和其他一些有辅助功能需求的用户。
The title of each accordion header is contained in an element with role button.
When focus is on the accordion header for a collapsed panel, expands the associated panel ...
至少有 2 个使用按钮元素的原因。很可能还有更多。
根据经验 - 标签的语义始终是选择要使用的元素的良好指南。
我正在寻找一种方法让 ngbPanelHeader 触发 ngb-accordion 到 open/close 中的内容。似乎手风琴要求标题是内容 open/close.
例如，如果 <ngb-panel> 中的 <ng-template>（在 <ngb-accordion> 中）被赋予 ngbPanelTitle 属性，它将成功触发手风琴open/close 它的内容。但是，如果相同的 <ng-template> 具有 ngbPanelHeader 属性，则不会。
如有任何解决方法的建议，我们将不胜感激！
Follow-up 由 Çağrı
给出的答案我发现他的解决方案可以与 non-button 元素一起使用，方法是将 click-event 处理程序附加到运行手风琴的 toggle() 函数的元素，并传递 non-button 元素的 id =19=] 元素作为该函数的参数。我已经更新了 Stackblitz 以展示如何实现它。
https://stackblitz.com/edit/angular-te1eyn
ngbPanelTitle 可以作为 ng-bootsrap 的默认设置，对于您的自定义模板，您需要将 ngbPanelToggle 添加到您的元素
<button ngbPanelToggle >Panel Header That Doesn't Open Panel Content</button>
跟进与WCAG recommendations for accordion不符。这意味着它很难用于屏幕 reader 用户和其他一些有辅助功能需求的用户。
The title of each accordion header is contained in an element with role button.
When focus is on the accordion header for a collapsed panel, expands the associated panel ...
至少有 2 个使用按钮元素的原因。很可能还有更多。
根据经验 - 标签的语义始终是选择要使用的元素的良好指南。