Componente de botones 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 de botones en Angular MDBootstap. El componente Botones se utiliza para crear un botón que indicará una posible acción del usuario. Contiene varios estilos de botón predefinidos, que representan cada uno con su propio propósito semántico.

Propiedades:

• color: Se utiliza para establecer el color de un botón.
• redondeado: Se utiliza para cambiar el estilo del botón a redondeado.
• degradado: se utiliza para agregar un color de fondo degradado al botón.
• contorno: Se utiliza para cambiar el estilo del botón a contorno.
• plano: Se utiliza para cambiar el estilo de botón a plano
• tamaño: Se utiliza para cambiar el tamaño del botón.
• bloque: Se utiliza para cambiar el estilo del botón a bloque.
• flotante: Se utiliza para cambiar el estilo del botón a flotante.

Sintaxis:

<button type="button" mdbBtn color="primary" mdbWavesEffect>
        Content
</button>

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, acceda 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:

Estructura del proyecto

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Button en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Buttons Component</h4>
    <br />
    <button mdbBtn color="primary" mdbWavesEffect>
        Primary Button
    </button>
    <button mdbBtn color="secondary" mdbWavesEffect>
        Secondary Button
    </button>
    <button mdbBtn color="success" mdbWavesEffect>
        Success Button
    </button>
    <button mdbBtn color="danger" mdbWavesEffect>
        Danger Button
    </button>
    <br/>
    <button mdbBtn color="warning" mdbWavesEffect>
        Warning Button
    </button>
    <button mdbBtn color="info" mdbWavesEffect>
        Info Button
    </button>
    <button mdbBtn color="light" mdbWavesEffect>
        Light Button
    </button>
    <button mdbBtn color="dark" mdbWavesEffect>
        Dark Button
    </button>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

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:

Componente de botones de Angular MDBootstrap

Ejemplo 2: Este ejemplo ilustra la variedad de estilos de botones en el componente Botones.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Buttons Component</h4>
    <br />
    <button mdbBtn outline='true' 
            color="primary" mdbWavesEffect>
        Button with outline
    </button>
    <button mdbBtn size="lg" 
            color="secondary" mdbWavesEffect>
        Large Button
     </button>
    <button mdbBtn size="sm" 
            color="success" mdbWavesEffect>
        Small Button
     </button>
    <button mdbBtn disabled 
            color="danger" mdbWavesEffect>
        Disabled Button
    </button>
    <br/>
    <button mdbBtn gradient='aqua' 
            color="warning" mdbWavesEffect>
        Gradient Button
    </button>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

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:

Varios estilos de botones en Angular MDBootstrap

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