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 paso a paso en Angular MDBootstap. El componente paso a paso se utiliza para representar el contenido en pasos o hitos. Cada paso seguido está separado y conectado con los botones.
Propiedades:
- disabledWaves: permite al usuario alternar los efectos de ondas.
- lineal: permite al usuario alternar el modo lineal.
- vertical: Permite al usuario cambiar la orientación del paso a paso a vertical.
Sintaxis:
<ul class="stepper stepper-horizontal"> <li class="completed"> <span>GeeksforGeeks</span> </li> </ul>
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 Stepper en Angular MDBootstrap.
aplicación.componente.html
aplicación.componente.ts
aplicación.módulo.ts
Producción:
Ejemplo 2: Este ejemplo ilustra cómo hacer un componente paso a paso vertical en Angular MDBootstrap.
aplicación.componente.html
aplicación.componente.ts
- aplicación.módulo.ts:
Javascript
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/stepper