Introducción:
Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. La etiqueta <mat-expansion-panel> es una especie de menú desplegable que tiene funciones de expansión y contracción.
Sintaxis de instalación:
ng add @angular/material
Acercarse:
- Primero, instale el material angular usando el comando mencionado anteriormente.
- Después de completar la instalación, importe ‘MatExpansionModule’ desde ‘@angular/material/expansion’ en el archivo app.module.ts.
- Luego use la etiqueta <mat-accordion> como etiqueta principal para la etiqueta <mat-expansion-panel>.
- Dentro de la etiqueta <mat-accordion> necesitamos usar la etiqueta <mat-expansion-panel> para cada elemento.
- Para la etiqueta <mat-expansion-panel> tenemos muchas etiquetas secundarias que se explican en la siguiente tabla.
- Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.
Nombre de etiqueta | Propiedad |
<título-del-panel-alfombrilla> | Se utiliza para mostrar el título del panel. |
<descripción-del-panel-alfombrilla> | Se utiliza para mostrar la información relativa al panel. |
Implementación de código:
app.module.ts
import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatExpansionModule } from '@angular/material'; import { AppComponent } from './example.component'; @NgModule({ declarations: [AppComponent], exports: [AppComponent], imports: [ CommonModule, FormsModule, MatExpansionModule ], }) export class AppModule {}
app.component.html
<mat-accordion> <mat-expansion-panel > <mat-expansion-panel-header> <mat-panel-title> GEEKSFORGEEKS </mat-panel-title> <mat-panel-description> Click here to expand the panel </mat-panel-description> </mat-expansion-panel-header> <p>One stop portal to all Computer Science Subjects. </p> </mat-expansion-panel> </mat-accordion>
Producción:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA