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.
El uso principal de matBadge y asignar un valor para mostrar números o estado sobre texto, imágenes o íconos. Podemos relacionarnos con ellos como un indicador de número de icono de notificació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 ‘MatBadgeModule’ desde ‘@angular/material/badge’ en el archivo app.module.ts.
- Luego use matBadge y asigne un número para mostrarlo sobre cualquier texto o imagen.
- También tenemos otras propiedades como matBadgeOverlap y matBadgeSize para personalizar el tamaño y la posición de la insignia.
- Si queremos cambiar el tema, podemos cambiarlo usando la propiedad matBadgeColor. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
- Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.
Implementación de código:
aplicación.módulo.ts:
Javascript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { MatBadgeModule} from '@angular/material/badge'; import { MatIconModule} from '@angular/material/icon'; import { MatButtonModule} from '@angular/material/button'; @NgModule({ imports: [ BrowserModule, FormsModule, MatButtonModule, MatBadgeModule, MatIconModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
aplicación.componente.html:
HTML
<h3> Mat-Badge over a text</h3> <p> <span matBadge="8" matBadgeOverlap="false"> Text with a badge </span> </p> <hr> <h3> Mat-Badge positioned left and right over a Button </h3> <p> <button mat-raised-button color="primary" matBadge="8" matBadgePosition="before" matBadgeColor="accent"> Left badge Button with accent theme </button> </p> <p> <button mat-raised-button color="accent" matBadge="8" matBadgePosition="after" matBadgeColor="primary"> Right badge button with primary theme </button> </p> <hr> <h3> Mat-Badge over a icon</h3> <p> <mat-icon matBadge="8" matBadgeColor="warn"> home </mat-icon> </p>
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