Code Documentation for design-system
  1. Components
  2. TableOfContentsLayoutDemoComponent

File

layouts/table-of-contents/src/lib/demo/table-of-contents-layout-demo.component.ts

Description

Table of contents layout demo

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector hra-table-of-contents-layout-demo
imports CommonModule MatIconModule ButtonsModule PageSectionComponent TableOfContentsLayoutModule
templateUrl ./table-of-contents-layout-demo.component.html 
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { PageSectionComponent } from '@hra-ui/design-system/content-templates/page-section';
import { TableOfContentsLayoutModule } from '../table-of-contents-layout.module';

/** Table of contents layout demo */
@Component({
  selector: 'hra-table-of-contents-layout-demo',
  imports: [CommonModule, MatIconModule, ButtonsModule, PageSectionComponent, TableOfContentsLayoutModule],
  templateUrl: './table-of-contents-layout-demo.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableOfContentsLayoutDemoComponent {}

<hra-table-of-contents-layout>
  <hra-table-of-contents-layout-header>
    <hra-page-section tagline="Page label">
      <ng-container *ngTemplateOutlet="sectionContentPlaceholder" />
      <button mat-button hraCtaButton>
        Action
        <mat-icon iconPositionEnd>arrow_forward</mat-icon>
      </button>
    </hra-page-section>
  </hra-table-of-contents-layout-header>

  @for (level of [2, 3, 4, 5, 6, 2, 3, 3]; track $index) {
    <hra-page-section
      [tagline]="`Section label in sentence case ${$index + 1}`"
      [level]="level"
      [anchor]="`section-label-in-sentence-case-${$index + 1}`"
    >
      <ng-container *ngTemplateOutlet="sectionContentPlaceholder" />
    </hra-page-section>
  }
</hra-table-of-contents-layout>

<ng-template #sectionContentPlaceholder>
  This is placeholder text. We should try to keep this short. When writing content, imagine you've never been to the HRA
  before. What would you want to learn here?
  <ul>
    <li>Text always goes on top.</li>
    <li>Other components may be swapped out for the button set.</li>
  </ul>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""