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

src/dev-app/button-toggle/button-toggle-demo.html
131 строка4 KB
Kristiyan Kostadinov
feat(material/button-toggle): allow disabled buttons to be interactive (#29550)
07 авг 2024, 23:09
07 авг 2024, 23:09ddc307e
<p>
  <mat-checkbox (change)="isVertical = $event.checked">Show Button Toggles Vertical</mat-checkbox>
</p>

<p>
  <mat-checkbox (change)="isDisabled = $event.checked">Disable Button Toggle Items</mat-checkbox>
</p>

<p>
  <mat-checkbox (change)="disabledInteractive = $event.checked">Allow Interaction with Disabled Button Toggles</mat-checkbox>
</p>

<p>
  <mat-checkbox (change)="hideSingleSelectionIndicator = $event.checked">Hide Single Selection Indicator</mat-checkbox>
</p>

<p>
  <mat-checkbox (change)="hideMultipleSelectionIndicator = $event.checked">Hide Multiple Selection Indicator</mat-checkbox>
</p>

<h1>Exclusive Selection</h1>

<section>
  <mat-button-toggle-group
    name="alignment"
    [vertical]="isVertical"
    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    <mat-button-toggle value="left" [disabled]="isDisabled">
      <mat-icon>format_align_left</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="center" [disabled]="isDisabled">
      <mat-icon>format_align_center</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="right" [disabled]="isDisabled">
      <mat-icon>format_align_right</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="justify" [disabled]="isDisabled">
      <mat-icon>format_align_justify</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
</section>

<section>
  <mat-button-toggle-group
    appearance="legacy"
    name="alignment"
    [vertical]="isVertical"
    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    <mat-button-toggle value="left" [disabled]="isDisabled">
      <mat-icon>format_align_left</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="center" [disabled]="isDisabled">
      <mat-icon>format_align_center</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="right" [disabled]="isDisabled">
      <mat-icon>format_align_right</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="justify" [disabled]="isDisabled">
      <mat-icon>format_align_justify</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
</section>

<h1>Disabled Group</h1>

<section>
  <mat-button-toggle-group
    name="checkbox"
    [vertical]="isVertical"
    [disabled]="isDisabled"
    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    <mat-button-toggle value="bold">
      <mat-icon>format_bold</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="italic">
      <mat-icon>format_italic</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="underline">
      <mat-icon>format_underlined</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
</section>

<h1>Multiple Selection</h1>
<section>
  <mat-button-toggle-group
    multiple
    [vertical]="isVertical"
    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    <mat-button-toggle>Flour</mat-button-toggle>
    <mat-button-toggle>Eggs</mat-button-toggle>
    <mat-button-toggle>Sugar</mat-button-toggle>
    <mat-button-toggle [disabled]="isDisabled">Milk</mat-button-toggle>
  </mat-button-toggle-group>
</section>
<section>
  <mat-button-toggle-group
    appearance="legacy"
    multiple
    [vertical]="isVertical"
    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    <mat-button-toggle>Flour</mat-button-toggle>
    <mat-button-toggle>Eggs</mat-button-toggle>
    <mat-button-toggle>Sugar</mat-button-toggle>
    <mat-button-toggle [disabled]="isDisabled">Milk</mat-button-toggle>
  </mat-button-toggle-group>
</section>

<h1>Single Toggle</h1>
<mat-button-toggle>Yes</mat-button-toggle>
<mat-button-toggle appearance="legacy">Yes</mat-button-toggle>

<h1>Dynamic Exclusive Selection</h1>
<section>
  <mat-button-toggle-group
    name="pies"
    [(ngModel)]="favoritePie"
    [vertical]="isVertical"
    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
    [disabledInteractive]="disabledInteractive">
    @for (pie of pieOptions; track pie) {
      <mat-button-toggle [value]="pie">{{pie}}</mat-button-toggle>
    }
  </mat-button-toggle-group>
  <p>Your favorite type of pie is: {{favoritePie}}</p>
</section>