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

src/dev-app/checkbox/checkbox-demo.html
264 строки9 KB
Kristiyan Kostadinov
refactor(multiple): consolidate logic for disabling animations
19 мар 2025, 20:01
19 мар 2025, 20:010a4cd91
<h1> Themed Checkboxes </h1>

<div>
  <mat-checkbox>Default</mat-checkbox>
</div>

<div>
  <mat-checkbox color="primary">Primary</mat-checkbox>
</div>

<div>
  <mat-checkbox color="accent">Accent</mat-checkbox>
</div>

<div>
  <mat-checkbox color="warn">Warn</mat-checkbox>
</div>


<h1>mat-checkbox: Basic Example</h1>
<form>
  <mat-checkbox [(ngModel)]="isChecked"
                name="cb"
                value="basic_checkbox"
                [color]="checkboxColor()"
                (change)="isIndeterminate = false"
                [indeterminate]="isIndeterminate"
                [disabled]="isDisabled"
                [disabledInteractive]="isDisabledInteractive"
                [labelPosition]="labelPosition"
                [matTooltip]="isDisabled ? 'Tooltip that only shows up when disabled' : null">
    Do you want to <em>foobar</em> the <em>bazquux</em>?

  </mat-checkbox> - <strong>{{printResult()}}</strong>
</form>
<div class="demo-checkbox">
  <input id="indeterminate-toggle" type="checkbox" [(ngModel)]="isIndeterminate">
  <label for="indeterminate-toggle">Toggle Indeterminate</label>
  <input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
  <label for="disabled-toggle">Toggle Disabled</label>
  <input id="disabled-interactive-toggle" type="checkbox" [(ngModel)]="isDisabledInteractive">
  <label for="disabled-interactive-toggle">Toggle Disabled Interactive</label>
  <input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
  <label for="color-toggle">Toggle Color</label>
</div>
<div>
  <p>Label position:</p>
  <div>
    <input #after type="radio"
           value="after"
           id="align-after"
           name="labelPosition"
           (click)="labelPosition = 'after'"
           checked>
    <label for="align-after">After</label>
  </div>
  <div>
    <input #before type="radio"
           value="before"
           id="align-before"
           name="labelPosition"
           (click)="labelPosition = 'before'">
    <label for="align-before">Before</label>
  </div>
</div>

<h1>Pseudo checkboxes</h1>
<div>
  <h2>Full appearance</h2>
  <mat-pseudo-checkbox></mat-pseudo-checkbox>
  <mat-pseudo-checkbox [disabled]="true"></mat-pseudo-checkbox>

  <mat-pseudo-checkbox state="checked"></mat-pseudo-checkbox>
  <mat-pseudo-checkbox state="checked" [disabled]="true"></mat-pseudo-checkbox>

  <mat-pseudo-checkbox state="indeterminate"></mat-pseudo-checkbox>
  <mat-pseudo-checkbox state="indeterminate" [disabled]="true"></mat-pseudo-checkbox>
<div>
<div>
  <h2>Minimal appearance</h2>
  <mat-pseudo-checkbox appearance="minimal"></mat-pseudo-checkbox>
  <mat-pseudo-checkbox appearance="minimal" [disabled]="true"></mat-pseudo-checkbox>

  <mat-pseudo-checkbox appearance="minimal" state="checked"></mat-pseudo-checkbox>
  <mat-pseudo-checkbox appearance="minimal" state="checked" [disabled]="true"></mat-pseudo-checkbox>

  <mat-pseudo-checkbox appearance="minimal" state="indeterminate"></mat-pseudo-checkbox>
  <mat-pseudo-checkbox appearance="minimal" state="indeterminate" [disabled]="true">
  </mat-pseudo-checkbox>
<div>

<h1>Nested Checklist</h1>
<mat-checkbox-demo-nested-checklist></mat-checkbox-demo-nested-checklist>

<div style="padding: 10px; border: 1px solid black">
  <h4>Configuration</h4>
  <mat-checkbox [(ngModel)]="demoRequired">required?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoLabelAfter">label after?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoChecked">checked?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoDisabled">disabled?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoIndeterminate">indeterminate?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoDisableRipple">disable ripple?</mat-checkbox><br>
  <mat-checkbox [(ngModel)]="demoHideLabel">hide label?</mat-checkbox><br>
  <mat-form-field>
    <mat-label>aria-label</mat-label>
    <input matInput [(ngModel)]="demoLabel">
  </mat-form-field><br>
  <mat-form-field>
    <mat-label>aria-labelledby</mat-label>
    <mat-select [(ngModel)]="demoLabelledBy">
      <mat-option>None</mat-option>
      <mat-option value="mylabel">My Label</mat-option>
    </mat-select>
  </mat-form-field><label id="mylabel">My Label</label><br>
  <mat-form-field>
    <mat-label>id</mat-label>
    <input matInput [(ngModel)]="demoId">
  </mat-form-field><br>
  <mat-form-field>
    <mat-label>name</mat-label>
    <input matInput [(ngModel)]="demoName">
  </mat-form-field><br>
  <mat-form-field>
    <mat-label>value</mat-label>
    <input matInput [(ngModel)]="demoValue">
  </mat-form-field><br>
  <mat-form-field>
    <mat-label>color</mat-label>
    <mat-select [(ngModel)]="demoColor">
      <mat-option value="primary">primary</mat-option>
      <mat-option value="accent">accent</mat-option>
      <mat-option value="warn">warn</mat-option>
    </mat-select>
  </mat-form-field>
  <br><br>

  <h4>Result</h4>
  <div>
    <h5>Click action: check-indeterminate</h5>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [checked]="demoChecked"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        (change)="demoChecked = $event.checked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [checked] & (change)
        }
    </mat-checkbox>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        [(ngModel)]="demoChecked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [(ngModel)]
        }
    </mat-checkbox>
  </div>
  <div clickActionCheck>
    <h5>Click action: check</h5>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [checked]="demoChecked"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        (change)="demoChecked = $event.checked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [checked] & (change)
        }
    </mat-checkbox>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        [(ngModel)]="demoChecked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [(ngModel)]
        }
    </mat-checkbox>
  </div>
  <div clickActionNoop>
    <h5>Click action: noop</h5>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [checked]="demoChecked"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        (change)="demoChecked = $event.checked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [checked] & (change)
        }
    </mat-checkbox>
    <mat-checkbox
        [required]="demoRequired"
        [labelPosition]="demoLabelAfter ? 'after' : 'before'"
        [aria-label]="demoLabel"
        [aria-labelledby]="demoLabelledBy"
        [color]="demoColor"
        [disableRipple]="demoDisableRipple"
        [id]="demoId"
        [name]="demoName"
        [value]="demoValue"
        [disabled]="demoDisabled"
        [indeterminate]="demoIndeterminate"
        [(ngModel)]="demoChecked"
        (indeterminateChange)="demoIndeterminate = $event">
        @if (!demoHideLabel) {
          Checkbox w/ [(ngModel)]
        }
    </mat-checkbox>
  </div>
</div>

<p>
  <mat-checkbox class="demo-traffic-light-checkbox">
    This checkbox has special styling when using the experimental token based theme
  </mat-checkbox>
</p>