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

src/dev-app/dialog/dialog-demo.html
159 строк4 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<h1>Dialog demo</h1>

<button matButton="elevated" color="primary" (click)="openJazz()" class="demo-dialog-button">
  Open dialog
</button>
<button matButton="elevated" color="accent" (click)="openContentElement()" class="demo-dialog-button">
  Open dialog with content elements
</button>
<button matButton="elevated" color="accent" (click)="openTemplate()" class="demo-dialog-button">
  Open dialog with template content
</button>

<p>
  <mat-checkbox [(ngModel)]="enableLegacyPadding">Enable legacy padding</mat-checkbox>
</p>

<p>
  <mat-checkbox [(ngModel)]="isScrollable">Make dialog scrollable</mat-checkbox>
</p>

<mat-card class="demo-dialog-card">
  <mat-card-content>
    <h2>Dialog dimensions</h2>

    <p>
      <mat-form-field>
        <mat-label>Width</mat-label>
        <input matInput [(ngModel)]="config.width" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Height</mat-label>
        <input matInput [(ngModel)]="config.height" />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-label>Min width</mat-label>
        <input matInput [(ngModel)]="config.minWidth" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Min height</mat-label>
        <input matInput [(ngModel)]="config.minHeight" />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-label>Max width</mat-label>
        <input matInput [(ngModel)]="config.maxWidth" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Max height</mat-label>
        <input matInput [(ngModel)]="config.maxHeight" />
      </mat-form-field>
    </p>

    <h2>Dialog position</h2>

    <p>
      <mat-form-field>
        <mat-label>Top</mat-label>
        <input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Bottom</mat-label>
        <input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-label>Left</mat-label>
        <input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Right</mat-label>
        <input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" />
      </mat-form-field>
    </p>

    <h2>Dialog backdrop</h2>

    <p>
      <mat-form-field>
        <mat-label>Backdrop class</mat-label>
        <input matInput [(ngModel)]="config.backdropClass" />
      </mat-form-field>
    </p>

    <mat-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</mat-checkbox>

    <h2>Other options</h2>

    <p>
      <mat-form-field>
        <mat-label>Button alignment</mat-label>
        <mat-select [(ngModel)]="actionsAlignment">
          <mat-option value="start">Start</mat-option>
          <mat-option value="end">End</mat-option>
          <mat-option value="center">Center</mat-option>
        </mat-select>
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-label>Dialog message</mat-label>
        <input matInput [(ngModel)]="config.data.message" />
      </mat-form-field>
    </p>

    <p>
      <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
    </p>
  </mat-card-content>
</mat-card>

<p>Last afterClosed result: {{lastAfterClosedResult | json}}</p>
<p>Last beforeClose result: {{lastBeforeCloseResult | json}}</p>

<ng-template let-data let-dialogRef="dialogRef">
  <p>Order printer ink refills.</p>

  <mat-form-field>
    <mat-label>How many?</mat-label>
    <input matInput #howMuch />
  </mat-form-field>

  <mat-form-field>
    <mat-label>What color?</mat-label>
    <mat-select #whatColor>
      <mat-option></mat-option>
      <mat-option value="black">Black</mat-option>
      <mat-option value="cyan">Cyan</mat-option>
      <mat-option value="magenta">Magenta</mat-option>
      <mat-option value="yellow">Yellow</mat-option>
    </mat-select>
  </mat-form-field>

  <p>{{ data.message }}</p>

  <p>I'm a template dialog. I've been opened {{numTemplateOpens}} times!</p>

  <button
    type="button"
    class="demo-dialog-button"
    cdkFocusInitial
    (click)="dialogRef.close({ quantity: howMuch.value, color: whatColor.value })"
  >
    Close dialog
  </button>
  <button
    (click)="dialogRef.updateSize('500px', '500px').updatePosition({top: '25px', left: '25px'});"
    class="demo-dialog-button"
  >
    Change dimensions
  </button>
</ng-template>