docs/src/app/pages/component-viewer/token-table.html - main - githubmirror/components

docs/src/app/pages/component-viewer/token-table.html

59 строк2 KB

Martin Boué

docs: show component tokens default value (#32876)

22 мар 2026, 14:22

22 мар 2026, 14:221210f51

<div class="docs-filters">
  <mat-form-field class="docs-name-field" subscriptSizing="dynamic" appearance="outline">
    <mat-label>Filter by name</mat-label>
    <input
      #nameInput
      matInput
      [value]="nameFilter()"
      (input)="nameFilter.set(nameInput.value)"/>
  </mat-form-field>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Filter by type</mat-label>
    <mat-select [(value)]="typeFilter">
      @for (type of types; track $index) {
        <mat-option [value]="type">{{type | titlecase}}</mat-option>
      }
    </mat-select>
    @if (typeFilter()) {
      <button matSuffix matIconButton aria-label="Clear type filter" matTooltip="Clear type filter"
              (click)="typeFilter.set(null); $event.stopPropagation()">
        <mat-icon>clear</mat-icon>
      </button>
    }
  </mat-form-field>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Filter by default value</mat-label>
    <input #defaultValueInput matInput [value]="defaultValueFilter()"
           (input)="defaultValueFilter.set(defaultValueInput.value)"/>
  </mat-form-field>

  <button mat-button (click)="reset()">Reset filters</button>
</div>

<div class="docs-markdown">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th class="docs-type-header">Type</th>
        <th class="docs-value-header">Default value</th>
      </tr>
    </thead>

    <tbody>
      @for (token of filteredTokens(); track token.overridesName) {
        <tr>
          <td><token-name [name]="token.overridesName"/></td>
          <td>{{token.type | titlecase}}</td>
          <td>{{token.value}}</td>
        </tr>
      } @empty {
        <tr>
          <td>No tokens match the current set of filters</td>
        </tr>
      }
    </tbody>
  </table>
</div>