MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de paneles en Angular MDBootstap.
El componente de paneles facilita un contenedor de contenido flexible y extensible que tiene múltiples variantes. Permite hacer un elemento que contenga un encabezado y algún contenido asociado con ese encabezado.
Sintaxis:
<mdb-card> <mdb-card-body> <mdb-card-title> <h2>Heading</h2> <h5>Sub-heading</h5> </mdb-card-title> <mdb-card-text>Content</mdb-card-text> </mdb-card-body> </mdb-card>
Acercarse:
- Descarga Angular MDBootstrap desde el sitio oficial .
- Extraiga los archivos al directorio de trabajo actual.
- Instale npm en el proyecto actual usando el siguiente comando:
npm install
- Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, muévase a ella con el siguiente comando:
cd appname
- Inicie el servidor con el siguiente comando:
ng serve
Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Paneles en Angular MDBootstrap.
app.component.html
<div id='gfg'> <mdb-card> <mdb-card-body> <mdb-card-title> <h2>GeeksforGeeks</h2> <h5>Panels Component</h5> </mdb-card-title> <mdb-card-text> MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component </mdb-card-text> </mdb-card-body> </mdb-card> </div>
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent{}
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule{}
Producción:
Ejemplo 2: Este ejemplo ilustra cómo agregar contenido adicional al componente Paneles.
app.component.html
<div id='gfg'> <mdb-card class="w-75 mb-3 text-right" bgColor="bg-success"> <mdb-card-body> <mdb-card-title> <h2>GeeksforGeeks</h2> <h5>Panels Component</h5> </mdb-card-title> <mdb-card-text> MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component </mdb-card-text> </mdb-card-body> </mdb-card> </div>
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent{}
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule{}
Producción:
Referencia: https://mdbootstrap.com/docs/angular/components/panels