时间戳

首页 > 解决方案 > 在活动选项卡上运行回调的 ClrTabs 更改事件而不是显示内容

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

问题描述

我想使用该ClrTabs组件来驱动与 iframe 的交互。我可以使用 js 来更改 iframe 中的当前视图，并且我希望能够选择几个不同的视图。我希望能够通过单击它们对应的ClrTab. 但是我找不到一种方法来处理事件以运行调用 iframe 的回调。我如何能够使用 VMWare Clarity 做到这一点ClrTabs？

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

标签： angulareventsvmware-clarity

解决方案

我强烈建议不要对 Clarity 的选项卡使用完整的 Angular 组件，而只使用 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 组件。

推荐阅读