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

src/dev-app/card/card-demo.html
153 строки5 KB
Naji
feat(material/card): support filled variant (#29868)
24 апр 2025, 20:01
24 апр 2025, 20:01663585a
<div class="demo-card-container">
  <mat-radio-group (change)="appearance = $event.value">
    <mat-radio-button value="raised">Raised</mat-radio-button>
    <mat-radio-button value="outlined">Outlined</mat-radio-button>
    <mat-radio-button value="filled">Filled</mat-radio-button>
  </mat-radio-group>

<!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
  <mat-card [appearance]="appearance">
    Card with only text content
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-content>
      Card with only <code>&lt;mat-card-content&gt;</code> and text content.
    </mat-card-content>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-subtitle>Subtitle</mat-card-subtitle>
      <mat-card-title>Card with title and footer</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>This is supporting text.</p>
      <p>{{longText}}</p>
    </mat-card-content>
    <mat-card-actions>
      <button matButton>Like</button>
      <button matButton>Share</button>
    </mat-card-actions>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-subtitle>Subtitle</mat-card-subtitle>
      <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>This is supporting text.</p>
      <p>{{longText}}</p>
    </mat-card-content>
    <mat-card-actions>
      <button matButton>Like</button>
      <button matButton>Share</button>
    </mat-card-actions>

  </mat-card>

  <mat-card [appearance]="appearance">
    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png" alt="Para Washed Out">
    <mat-card-header>
      <mat-card-title>Content Title</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>Here is some content</p>
    </mat-card-content>
    <mat-card-actions align="end">
      <button matButton>Like</button>
      <button matButton>Share</button>
    </mat-card-actions>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <img mat-card-avatar>
      <mat-card-title>Header title</mat-card-title>
      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
    </mat-card-header>
    <img alt="Para Washed Out" mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <mat-card-content>
      <p>Here is some content</p>
    </mat-card-content>
  </mat-card>

  <mat-card class="demo-card-blue mat-card-flat" [appearance]="appearance">
    <mat-card-header>
      <mat-card-title>Easily customizable</mat-card-title>
    </mat-card-header>
    <mat-card-actions>
      <button matButton>First</button>
      <button matButton>Second</button>
    </mat-card-actions>
  </mat-card>

  <hr>
  <h2>Cards with media area</h2>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-title-group>
        <mat-card-title>Card</mat-card-title>
        <mat-card-subtitle>Small</mat-card-subtitle>
        <img mat-card-sm-image>
      </mat-card-title-group>
    </mat-card-header>
    <mat-card-content>
      {{longText}}
    </mat-card-content>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-title-group>
        <mat-card-title>Card</mat-card-title>
        <mat-card-subtitle>Medium</mat-card-subtitle>
        <img mat-card-md-image>
      </mat-card-title-group>
    </mat-card-header>
    <mat-card-content>
      {{longText}}
    </mat-card-content>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-title-group>
        <mat-card-title>Card</mat-card-title>
        <mat-card-subtitle>Large</mat-card-subtitle>
        <img mat-card-lg-image>
      </mat-card-title-group>
    </mat-card-header>
    <mat-card-content>
      {{longText}}
    </mat-card-content>
  </mat-card>

  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-title-group>
        <mat-card-title>Card</mat-card-title>
        <mat-card-subtitle>Extra large</mat-card-subtitle>
        <img mat-card-xl-image>
      </mat-card-title-group>
    </mat-card-header>
    <mat-card-content>
      {{longText}}
    </mat-card-content>
  </mat-card>

  <!-- Used to test header without an avatar. -->
  <mat-card [appearance]="appearance">
    <mat-card-header>
      <mat-card-title>Header title</mat-card-title>
      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
    </mat-card-header>
    <img alt="Para Washed Out" mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
    <mat-card-content>
      <p>Here is some content</p>
    </mat-card-content>
  </mat-card>

</div>