Question

我想使用ClrTabs组件来推动与iframe的互动。我可以使用js来更改iframe中的当前视图，并且我希望能够选择一些不同的视图。我希望能够通过点击相应的ClrTab来选择和查看iframe中的这些视图。但我无法找到一种处理事件的方法来运行调用iframe的回调。我如何使用VMWare Clarity ClrTabs？

执行此操作

<clr-tabs>
  <clr-tab *ngFor="let tab of tabs">
    <button clrTabLink>{{tab.text}}</button>
  </clr-tab>
</clr-tabs>

Answer 1

我强烈建议不要将完整的Angular组件用于Clarity中的选项卡，而只使用Clarity支持选项卡的静态DOM：

<ul class="nav" role="tablist">
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link active" aria-selected="true">First tab</button>
    </li>
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link">Second tab</button>
    </li>
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link">Third tab</button>
    </li>
</ul>
<section role="tabpanel">
    <iframe></iframe>
</section>

在模板中使用此功能后，您可以轻松地将点击侦听器添加到这些按钮，并触发iframe所需的任何内容。

我看到你在iframe之外设置标签的模式所遇到的问题是你无法使其成为可访问的。标签永远不会链接到iframe的内容，因此屏幕阅读器无法描述标签激活的内容。由于Clarity选项卡的核心是可访问性，因此每个选项卡需要一个面板，因此我们可以通过ARIA属性（如aria-controls和aria-labelledby）链接它们。您拥有单个面板的事实意味着您无法使用Clarity中的Angular组件。

在活动选项卡上运行回调的ClrTabs更改了事件而不是显示内容

1 个答案: