Componente paso a paso de Angular MDBootstrap

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:

Project Structure

Estructura del proyecto

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:

Angular MDBootstrap Stepper Component

Componente paso a paso horizontal MDBootstrap angular

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:

Angular MDBootstrap Stepper Component

Componente paso a paso vertical MDBootstrap angular

Referencia: https://mdbootstrap.com/docs/angular/components/stepper

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *