La<mat-card>una Directiva Angular, se utiliza para crear una tarjeta con capacidad de diseño de material y animación. Proporciona estilos preestablecidos para las secciones comunes de la tarjeta.
- – Representa la sección para el título.
- – Representa la sección de subtítulos.
- – Representa la sección de contenido.
- – Representa la sección de acciones.
- – Representa la sección del pie de página.
En este capítulo, mostraremos la configuración necesaria 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 –
| Step | Description |
|---|---|
| 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 .
importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatCardModule, MatButtonModule}de@angular/materialimport{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({{FormsModule, ReactiveFormsModule}de@angular/forms)
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatCardModule,MatButtonModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}>)
A continuación se muestra el contenido del archivo CSS modificado app.component.css .
.tp-card {
max-width:400px;}.tp-header-image {
imagen de fondo: url(https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg);
tamaño del fondo: cubierta;}A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
>mat-card-avatar>Bases de HTML5HTML<imgmat-card-imagesrc="https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg"alt="Learn HTML5"> HTML5 es la próxima revisión importante del estándar HTML que reemplaza a HTML 4.01, XHTML 1.0 y XHTML 1.1. HTML5 es un estándar para estructurar y presentar el contenido en la World Wide Web. Botón mate>Botón LICKEmat>SHARE
Resultado
Verifique el resultado.
Detalles
- Aquí, hemos creado una tarjeta usando mat-card.