ClrTabs, которые запускают обратные вызовы на активной вкладке, изменили событие вместо отображения контента - PullRequest
Новая
       19

ClrTabs, которые запускают обратные вызовы на активной вкладке, изменили событие вместо отображения контента

0 голосов
/ 01 мая 2018

Я бы хотел использовать компонент ClrTabs для управления взаимодействием с iframe. Я могу использовать js для изменения текущего представления внутри iframe, и есть несколько разных представлений, которые я хочу выбрать. Я хотел бы иметь возможность выбрать и просмотреть эти представления в iframe, щелкнув их соответствующий ClrTab. Но я не могу найти способ обработать событие, чтобы запустить мои обратные вызовы, которые вызывают iframe. Как я смогу сделать это, используя VMWare Clarity ClrTabs? 

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

1 Ответ

0 голосов
/ 01 мая 2018

Я настоятельно рекомендую не использовать полный компонент Angular для вкладок из Clarity, а только статический DOM, который Clarity поддерживает для вкладок: 

<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.

...