2025-11-14 12:00:34 +00:00
|
|
|
<div role="tablist" class="docs-tab-list">
|
|
|
|
|
@for (tab of computedTabs(); track tab.tabId) {
|
|
|
|
|
<button
|
|
|
|
|
[id]="tab.tabId"
|
|
|
|
|
role="tab"
|
|
|
|
|
class="docs-tab"
|
|
|
|
|
[class.docs-tab-active]="tab.tabId === selectedTab()"
|
2025-11-17 07:14:02 +00:00
|
|
|
[aria-selected]="tab.tabId === selectedTab()"
|
|
|
|
|
[aria-controls]="tab.tabPanelId"
|
2025-11-14 12:00:34 +00:00
|
|
|
(click)="selectedTab.set(tab.tabId)"
|
|
|
|
|
>
|
|
|
|
|
{{ tab.label }}
|
|
|
|
|
</button>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@for (tab of computedTabs(); track tab.tabId) {
|
|
|
|
|
<div
|
|
|
|
|
[id]="tab.tabPanelId"
|
|
|
|
|
role="tabpanel"
|
|
|
|
|
class="docs-tab-panel"
|
|
|
|
|
[attr.aria-labelledby]="tab.tabId"
|
|
|
|
|
[hidden]="tab.tabId !== selectedTab()"
|
|
|
|
|
#tabpanel
|
|
|
|
|
></div>
|
|
|
|
|
}
|