src/dev-app/button/button-demo.html - main - githubmirror/components

src/dev-app/button/button-demo.html
486 строк12 KB
Jeremy Mowery
feat(material/button): Add support for showing a progress indicator inside the button (#32698)
27 фев 2026, 02:02
27 фев 2026, 02:02b4a89d5
<div class="demo-button">
  <h4 class="demo-section-header">Buttons</h4>
  <section>
    @for (appearance of appearances; track $index) {
      <button [matButton]="appearance">{{appearance}}</button>
    }
    <button matFab>
      <mat-icon>check</mat-icon>
    </button>
    <button matMiniFab>
      <mat-icon>check</mat-icon>
    </button>
    <button matFab extended>Search</button>
    <button matFab extended>
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </button>
  </section>
  <section>
    @for (appearance of appearances; track $index) {
      <button
        [matButton]="appearance"
        disabled
        [disabledInteractive]="disabledInteractive"
        [matTooltip]="tooltipText"
      >
        {{appearance}}
      </button>
    }
    <button matFab disabled [disabledInteractive]="disabledInteractive" [matTooltip]="tooltipText">
      <mat-icon>check</mat-icon>
    </button>
    <button
      matMiniFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      <mat-icon>check</mat-icon>
    </button>
    <button
      matFab
      extended
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      Search
    </button>
    <button
      matFab
      extended
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </button>
  </section>
  <section>
    @for (appearance of appearances; track $index) {
      <button [matButton]="appearance" [showProgress]="true">
        {{appearance}}
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        >
        </mat-progress-spinner>
      </button>
    }
    <button matFab [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>check</mat-icon>
    </button>
    <button matMiniFab [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>check</mat-icon>
    </button>
    <button matFab extended [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      Search
    </button>
    <button matFab extended [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Anchors</h4>
  <section>
    @for (appearance of appearances; track $index) {
      <a href="//www.google.com" [matButton]="appearance">SEARCH</a>
    }
    <a href="//www.google.com" matFab>
      <mat-icon>check</mat-icon>
    </a>
    <a href="//www.google.com" matMiniFab>
      <mat-icon>check</mat-icon>
    </a>
    <a href="//www.google.com" matFab extended>Search</a>
    <a href="//www.google.com" matFab extended>
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </a>
  </section>
  <section>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton
      color="primary"
      >SEARCH</a
    >
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="elevated"
      >SEARCH</a
    >
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="outlined"
      color="primary"
      >SEARCH</a
    >
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="filled"
      >SEARCH</a
    >
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab
    >
      <mat-icon>check</mat-icon>
    </a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matMiniFab
    >
      <mat-icon>check</mat-icon>
    </a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab
      extended
      >Search</a
    >
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab
      extended
    >
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </a>
  </section>

  @for (appearance of appearances; track $index) {
    <h4 class="demo-section-header">
      <code>{{appearance}}</code> Appearance
    </h4>
    <section>
      <button [matButton]="appearance">unthemed</button>
      <button [matButton]="appearance" color="primary">primary</button>
      <button [matButton]="appearance" color="accent">accent</button>
      <button [matButton]="appearance" color="warn">warn</button>
      <button
        [matButton]="appearance"
        disabled
        [disabledInteractive]="disabledInteractive"
        [matTooltip]="tooltipText"
      >
        disabled
      </button>
      <button [matButton]="appearance">
        <mat-icon>home</mat-icon>
        with icons
        <mat-icon iconPositionEnd>favorite</mat-icon>
      </button>
      <button [matButton]="appearance">
        <mat-icon>home</mat-icon>
        with icons
      </button>
      <button [matButton]="appearance" [showProgress]="true">
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
        <mat-icon>home</mat-icon>
        with icons
      </button>
    </section>
  }

  <h4 class="demo-section-header">Icon Buttons</h4>
  <section>
    <button matIconButton>
      <mat-icon>cached</mat-icon>
    </button>
    <button matIconButton color="primary">
      <mat-icon>cached</mat-icon>
    </button>
    <button matIconButton color="accent">
      <mat-icon>backup</mat-icon>
    </button>
    <button matIconButton color="warn">
      <mat-icon>trending_up</mat-icon>
    </button>
    <button
      matIconButton
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      <mat-icon>visibility</mat-icon>
    </button>
    <button matIconButton color="warn" [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>trending_up</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Icon Button Anchors</h4>
  <section>
    <a href="#" matIconButton>
      <mat-icon>cached</mat-icon>
    </a>
    <a href="#" matIconButton color="primary">
      <mat-icon>cached</mat-icon>
    </a>
    <a href="#" matIconButton color="accent">
      <mat-icon>backup</mat-icon>
    </a>
    <a href="#" matIconButton color="warn">
      <mat-icon>trending_up</mat-icon>
    </a>
    <a
      href="#"
      matIconButton
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      <mat-icon>visibility</mat-icon>
    </a>
  </section>

  <h4 class="demo-section-header">FABs</h4>
  <section>
    <button matFab>
      <mat-icon>delete</mat-icon>
    </button>
    <button matFab color="primary">
      <mat-icon>delete</mat-icon>
    </button>
    <button matFab color="accent">
      <mat-icon>bookmark</mat-icon>
    </button>
    <button matFab color="warn">
      <mat-icon>home</mat-icon>
    </button>
    <button matFab disabled [disabledInteractive]="disabledInteractive" [matTooltip]="tooltipText">
      <mat-icon>favorite</mat-icon>
    </button>
    <button matFab color="warn" [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>home</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Mini FABs</h4>
  <section>
    <button matMiniFab>
      <mat-icon>menu</mat-icon>
    </button>
    <button matMiniFab color="primary">
      <mat-icon>menu</mat-icon>
    </button>
    <button matMiniFab color="accent">
      <mat-icon>plus_one</mat-icon>
    </button>
    <button matMiniFab color="warn">
      <mat-icon>filter_list</mat-icon>
    </button>
    <button matMiniFab color="warn" [showProgress]="true">
      <mat-progress-spinner
        progressIndicator
        mode="indeterminate"
        diameter="20"
        aria-label="Loading"
        tabindex=""
      />
      <mat-icon>filter_list</mat-icon>
    </button>
    <button
      matMiniFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
    >
      <mat-icon>home</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Interaction/State</h4>
  <section class="demo-no-flex">
    <div>
      <p>isDisabled: {{isDisabled}}</p>
      <p>Button 1 as been clicked {{clickCounter}} times</p>
      <p>
        <mat-checkbox [(ngModel)]="disabledInteractive"
          >Allow disabled button interactivity</mat-checkbox
        >
      </p>
      <p>
        <mat-checkbox [(ngModel)]="isDisabled">All disabled</mat-checkbox>
      </p>
      <p>
        <mat-checkbox [(ngModel)]="showProgress">All showProgress</mat-checkbox>
      </p>
      <button matButton="filled" (click)="button1.focus()">Focus 1</button>
      <button matButton="filled" (click)="button2.focus()">Focus 2</button>
      <button matButton="filled" (click)="button3.focus()">Focus 3</button>
      <button matButton="filled" (click)="button4.focus()">Focus 4</button>
    </div>
    <div>
      <button
        matButton
        #button1
        [disabled]="isDisabled"
        [showProgress]="showProgress"
        (click)="clickCounter=clickCounter+1"
      >
        Button 1
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </button>
      <button
        matButton
        #button2
        color="primary"
        [disabled]="isDisabled"
        [showProgress]="showProgress"
      >
        Button 2
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </button>
      <a
        href="//www.google.com"
        #button3
        matButton
        color="accent"
        [disabled]="isDisabled"
        [showProgress]="showProgress"
      >
        Button 3
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </a>
      <button
        matButton="elevated"
        #button4
        color="primary"
        [disabled]="isDisabled"
        [showProgress]="showProgress"
      >
        Button 4
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </button>
      <button matMiniFab [disabled]="isDisabled" [showProgress]="showProgress">
        <mat-icon>check</mat-icon>
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </button>
      <button matIconButton color="accent" [disabled]="isDisabled" [showProgress]="showProgress">
        <mat-icon>favorite</mat-icon>
        <mat-progress-spinner
          progressIndicator
          mode="indeterminate"
          diameter="20"
          aria-label="Loading"
          tabindex=""
        />
      </button>
    </div>
  </section>
</div>