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

src/dev-app/baseline/baseline-demo.html
67 строк2 KB
Paul Gschwendtner
build: restructure demo-app in favor of bazel (#13965)
15 ноя 2018, 18:50
15 ноя 2018, 18:506d7f417
<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Basic Forms</mat-toolbar>
  <mat-card-content>
    Text Before |
    <mat-checkbox>Checkbox Label</mat-checkbox>
    | Text 1 |
    <mat-radio-button value="option_1">Radio 1</mat-radio-button>
    | Text 2 |
    <mat-radio-button value="option_2">Radio 2</mat-radio-button>
    | Text 3 |
    <mat-radio-button value="option_3">Radio 3</mat-radio-button>
    | Text 4 |
    <mat-form-field>
      <mat-label>Input</mat-label>
      <input matInput value="Text Input">
    </mat-form-field>
    | Text 5 |
    <mat-form-field>
      <mat-label>This label is really really really long</mat-label>
      <mat-select>
        <mat-option value="option">Option</mat-option>
        <mat-option value="long">This option is really really really long</mat-option>
      </mat-select>
    </mat-form-field>
    | Text 6 |
    <mat-form-field>
      <mat-label>Input</mat-label>
      <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
    </mat-form-field>
    | Text After
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Headers</mat-toolbar>
  <mat-card-content>
    <h1>
      Text Before |
      <mat-checkbox>Checkbox Label</mat-checkbox>
      | Text 1 |
      <mat-radio-button value="option_1">Radio 1</mat-radio-button>
      | Text 2 |
      <mat-radio-button value="option_2">Radio 2</mat-radio-button>
      | Text 3 |
      <mat-radio-button value="option_3">Radio 3</mat-radio-button>
      | Text 4 |
      <mat-form-field>
        <mat-label>Input</mat-label>
        <input matInput value="Text Input">
      </mat-form-field>
      | Text 5 |
      <mat-form-field>
        <mat-label>This label is really really really long</mat-label>
        <mat-select>
          <mat-option value="option">Option</mat-option>
          <mat-option value="long">This option is really really really long</mat-option>
        </mat-select>
      </mat-form-field>
      | Text 6 |
      <mat-form-field>
        <mat-label>Input</mat-label>
        <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
      </mat-form-field>
      | Text After
    </h1>
  </mat-card-content>
</mat-card>