angular/aio/src/app/embedded/toc/toc.component.html

30 lines
1.2 KiB
HTML

<div *ngIf="hasToc" [class.collapsed]="isCollapsed">
<button *ngIf="!isEmbedded" type="button" class="toc-heading"
(click)="toTop()" title="Top of page">Contents</button>
<div *ngIf="!hasSecondary && isEmbedded" class="toc-heading embedded">Contents</div>
<button *ngIf="hasSecondary" type="button" class="toc-heading embedded secondary"
(click)="toggle(false)"
title="Expand/collapse contents"
aria-label="Expand/collapse contents"
[attr.aria-pressed]="!isCollapsed">
Contents
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
</button>
<ul class="toc-list">
<li #tocItem *ngFor="let toc of tocList; let i = index" title="{{toc.title}}"
class="{{toc.level}}" [class.secondary]="toc.isSecondary" [class.active]="i === activeIndex">
<a [href]="toc.href" [innerHTML]="toc.content"></a>
</li>
</ul>
<button type="button" (click)="toggle()" *ngIf="hasSecondary"
class="toc-more-items embedded material-icons" [class.collapsed]="isCollapsed"
title="Expand/collapse contents"
aria-label="Expand/collapse contents"
[attr.aria-pressed]="!isCollapsed">
</button>
</div>