Material angular 7 - Tarjeta

los <mat-card>, una directiva angular, se utiliza para crear una tarjeta con capacidades de animación y estilo de diseño de materiales. Proporciona estilos preestablecidos para las secciones de tarjetas comunes.

  • <mat-card-title> - Representa la sección por título.

  • <mat-card-subtitle> - Representa la sección de subtítulos.

  • <mat-card-content> - Representa la sección de contenido.

  • <mat-card-actions> - Representa la sección de acciones.

  • <mat-card-footer> - Representa la sección de pie de página.

En este capítulo, mostraremos la configuración requerida para dibujar un control de tarjeta usando Material angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 - Capítulo Configuración del proyecto -

Paso Descripción
1 Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 - Configuración del proyecto .
2 Modifique app.module.ts , app.component.ts , app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCardModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatCardModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

A continuación se muestra el contenido del archivo CSS modificado app.component.css.

.tp-card {
   max-width: 400px;
}
.tp-header-image {
   background-image: url('https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg');
   background-size: cover;
}

A continuación se muestra el contenido del archivo de host HTML modificado app.component.html.

<mat-card class = "tp-card">
   <mat-card-header>
      <div mat-card-avatar class = "tp-header-image"></div>
      <mat-card-title>HTML5</mat-card-title>
      <mat-card-subtitle>HTML Basics</mat-card-subtitle>
   </mat-card-header>
   <img mat-card-image src = "https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg" alt = "Learn HTML5">
   <mat-card-content>
      <p>
         HTML5 is the next major revision of the HTML standard superseding
         HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
         structuring and presenting content on the World Wide Web.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
   </mat-card-actions>
</mat-card>

Resultado

Verifique el resultado.

Detalles

  • Aquí, hemos creado una tarjeta usando mat-card.