src/dev-app/slide-toggle/slide-toggle-demo.html - main - githubmirror/components

src/dev-app/slide-toggle/slide-toggle-demo.html

58 строк2 KB

Joy Serquiña

fix(material/slide-toggle): prevent icon label text-spacing cutoff (#33559)

21 июл 2026, 20:05

21 июл 2026, 20:0556c7ff6

<div class="demo-slide-toggle">
  <mat-slide-toggle color="primary" [(ngModel)]="firstToggle"
    >Default Slide Toggle</mat-slide-toggle
  >
  <mat-slide-toggle [(ngModel)]="firstToggle" disabled>Disabled Slide Toggle</mat-slide-toggle>
  <mat-slide-toggle [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
  <mat-slide-toggle disabled disabledInteractive [(ngModel)]="firstToggle"
    >Disabled Interactive Toggle</mat-slide-toggle
  >
  <mat-slide-toggle hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>

  <p>With label before the slide toggle.</p>

  <mat-slide-toggle labelPosition="before" color="primary" [(ngModel)]="firstToggle"
    >Default Slide Toggle</mat-slide-toggle
  >
  <mat-slide-toggle labelPosition="before" [(ngModel)]="firstToggle" disabled
    >Disabled Slide Toggle</mat-slide-toggle
  >
  <mat-slide-toggle labelPosition="before" [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
  <mat-slide-toggle labelPosition="before" hideIcon [(ngModel)]="firstToggle"
    >No icon</mat-slide-toggle
  >

  <p>With icon as part of the label.</p>

  <mat-slide-toggle [(ngModel)]="firstToggle">
    <span class="demo-slide-toggle-label-with-icon">
      <mat-icon>notifications</mat-icon>
      Notifications
    </span>
  </mat-slide-toggle>
  <mat-slide-toggle labelPosition="before" [(ngModel)]="firstToggle">
    <span class="demo-slide-toggle-label-with-icon">
      <mat-icon>volume_up</mat-icon>
      Sounds
    </span>
  </mat-slide-toggle>

  <p>With no label.</p>

  <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />

  <p>With full width</p>
  <div class="demo-full-width-container">
    <mat-slide-toggle fullWidth labelPosition="before" [(ngModel)]="firstToggle">Full Width Before</mat-slide-toggle>
    <mat-slide-toggle fullWidth labelPosition="after" [(ngModel)]="firstToggle">Full Width After</mat-slide-toggle>
  </div>

  <p>Example where the slide toggle is required inside of a form.</p>

  <form #form="ngForm" (ngSubmit)="onFormSubmit()">
    <mat-slide-toggle name="slideToggle" [(ngModel)]="formToggle">Slide Toggle</mat-slide-toggle>
    <p>
      <button matButton="elevated" type="submit">Submit Form</button>
    </p>
  </form>
</div>