docs/src/app/shared/example-viewer/example-viewer.html - main - githubmirror/components

docs/src/app/shared/example-viewer/example-viewer.html
130 строк4 KB
Shuaib Hasan Akib
docs: add hide code icon on snippet toggle (#31897)
24 сен 2025, 06:34
24 сен 2025, 06:34b5f1f88
@let exampleData = this.exampleData();
@let fileUrl = this.fileUrl();

<div class="docs-example-viewer-wrapper">
  @if (view() === 'snippet') {
    <div class="docs-example-viewer-source-compact">
      <div class="docs-button-bar">
        <button
          mat-icon-button
          type="button"
          (click)="copySource(snippet())"
          class="docs-example-source-copy docs-example-button"
          matTooltip="Copy snippet"
          title="Copy example source"
          aria-label="Copy example source to clipboard"
        >
          <mat-icon>content_copy</mat-icon>
        </button>
        <button
          mat-icon-button
          type="button"
          (click)="toggleCompactView()"
          class="docs-example-compact-toggle docs-example-button"
          matTooltip="View full example"
          aria-label="View less"
        >
          <mat-icon>
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
              <polygon
                points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"
              />
            </svg>
          </mat-icon>
        </button>
      </div>

      @if (fileUrl) {
        <code-snippet [source]="fileUrl" />
      }
    </div>
  } @else {
    <div class="docs-example-viewer-title">
      <p>{{exampleData?.title}}</p>

      <div class="docs-example-viewer-actions">
        <button
          mat-icon-button
          type="button"
          [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
          matTooltip="Copy link to example"
          (click)="_copyLink()"
        >
          <mat-icon>link</mat-icon>
        </button>

        @if (showCompactToggle()) {
          <button
            mat-icon-button
            (click)="toggleCompactView()"
            matTooltip="View snippet only"
            aria-label="View less"
          >
            <mat-icon>
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
                <path
                  d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"
                />
              </svg>
            </mat-icon>
          </button>
        }

        <button
          mat-icon-button
          type="button"
          (click)="toggleSourceView()"
          [matTooltip]="view() === 'demo' ? 'View code' : 'Hide code'"
          aria-label="View source"
        >
          <mat-icon>
            {{view() === 'demo' ? 'code' : 'code_off'}}
          </mat-icon>
        </button>

        <stackblitz-button [example]="example" />
      </div>
    </div>

    @if (view() === 'full') {
      <div class="docs-example-viewer-source">
        <mat-tab-group
          animationDuration="0ms"
          [(selectedIndex)]="selectedTab"
          mat-stretch-tabs="false"
        >
          @for (tabName of _exampleTabNames(); track tabName) {
            <mat-tab [label]="tabName">
              <div class="docs-button-bar">
                <button
                  mat-icon-button
                  type="button"
                  (click)="copySource(snippet(), selectedTab())"
                  class="docs-example-source-copy docs-example-button"
                  matTooltip="Copy example source"
                  title="Copy example source"
                  aria-label="Copy example source to clipboard"
                >
                  <mat-icon>content_copy</mat-icon>
                </button>
              </div>
              <code-snippet [source]="exampleTabs()[tabName]" />
            </mat-tab>
          }
        </mat-tab-group>
      </div>
    }
  }

  @if (view() !== 'snippet') {
    <div class="docs-example-viewer-body">
      @let componentType = _exampleComponentType();

      @if (componentType && !example?.includes('harness')) {
        <ng-template [ngComponentOutlet]="componentType" />
      } @else {
        <div>This example contains tests. Open in Stackblitz to run the tests.</div>
      }
    </div>
  }
</div>