src/dev-app/grid-list/grid-list-demo.html - main - githubmirror/components

src/dev-app/grid-list/grid-list-demo.html
136 строк5 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<div class="demo-grid-list">
  <mat-card>
    <mat-card-title>Basic grid list</mat-card-title>
    <mat-card-content class="demo-basic-list">
      <mat-grid-list cols="4" [rowHeight]="basicRowHeight">
        <mat-grid-tile> One </mat-grid-tile>
        <mat-grid-tile> Two </mat-grid-tile>
        <mat-grid-tile> Three </mat-grid-tile>
        <mat-grid-tile> Four </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-title>Grid with 1 cell at the beginning of a new row</mat-card-title>
    <mat-card-content class="demo-basic-list">
      <mat-grid-list [cols]="6" gutterSize="20px" rowHeight="20px">
        <mat-grid-tile [colspan]="3" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="3" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2"
                       class="mat-elevation-z15">
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-title>Grid with col-span</mat-card-title>
    <mat-card-content class="demo-basic-list">
      <mat-grid-list [cols]="10" gutterSize="20px" rowHeight="20px">
        <mat-grid-tile [colspan]="4" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="2" [rowspan]="2"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="4" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="4" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
        <mat-grid-tile [colspan]="4" [rowspan]="4"
                       class="mat-elevation-z15">
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-title>Fixed-height grid list</mat-card-title>
    <mat-card-content>
      <mat-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
        @for (tile of tiles; track tile) {
          <mat-grid-tile [colspan]="tile.cols" [rowspan]="tile.rows"
                        [style.background]="tile.color">
            {{tile.text}}
          </mat-grid-tile>
        }
      </mat-grid-list>
    </mat-card-content>
    <mat-card-actions>
      <p>Change list cols: <input type="number" [(ngModel)]="fixedCols"></p>
      <p>Change row height: <input type="number" [(ngModel)]="fixedRowHeight"></p>
      <button matButton (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
    </mat-card-actions>
  </mat-card>

  <mat-card>
    <mat-card-title>Ratio-height grid list</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
        @for (tile of tiles; track tile) {
          <mat-grid-tile [style.background]="'lightblue'">{{tile.text}}</mat-grid-tile>
        }
      </mat-grid-list>
    </mat-card-content>
    <mat-card-actions>
      <p>Change ratio: <input [(ngModel)]="ratio"></p>
    </mat-card-actions>
  </mat-card>

  <mat-card>
    <mat-card-title>Fit-height grid list</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                    [style.height]="fitListHeight">
        @for (tile of tiles; track tile) {
          <mat-grid-tile [style.background]="'#F1EBBA'">{{tile.text}}</mat-grid-tile>
        }
      </mat-grid-list>
    </mat-card-content>
    <mat-card-actions>
      <p>Change list height: <input [(ngModel)]="fitListHeight"></p>
      <p>Change gutter: <input type="number" [(ngModel)]="ratioGutter"></p>
    </mat-card-actions>
  </mat-card>

  <mat-card>
    <mat-card-title>Grid list with header</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="3" rowHeight="200px">
        @for (dog of dogs; track dog) {
          <mat-grid-tile style="background:gray">
            <mat-grid-tile-header>
              <mat-icon mat-grid-avatar>info_outline</mat-icon>
              {{dog.name}}
            </mat-grid-tile-header>
          </mat-grid-tile>
        }
      </mat-grid-list>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-title>Grid list with footer</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="3" rowHeight="200px">
        @for (dog of dogs; track dog) {
          <mat-grid-tile>
            <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
            <mat-grid-tile-footer>
              <h3 mat-line>{{dog.name}}</h3>
              <span mat-line>Human: {{dog.human}}</span>
              <mat-icon>star_border</mat-icon>
            </mat-grid-tile-footer>
          </mat-grid-tile>
        }
      </mat-grid-list>
    </mat-card-content>
  </mat-card>
</div>