Angular MDBootstrap 按钮组件

MDBootstrap是一个基于 Material Design 和 bootstrap 的 Angular UI 库，用于通过其无缝且易于使用的组件制作有吸引力的网页。在本文中，我们将了解如何在 Angular MDBootstap 中使用 Buttons 组件。 Buttons 组件用于制作一个指示可能的用户操作的按钮。它包含几个预定义的按钮样式，代表每个都有自己的语义目的。

特性：

• color：用于设置按钮的颜色。
• 圆形：用于将按钮样式更改为圆形。
• 渐变：用于为按钮添加渐变背景色。
• 轮廓：用于将按钮样式更改为轮廓。
• flat：用于将按钮样式更改为平面
• size：用于改变按钮的大小。
• 块：用于将按钮样式更改为块。
• 浮动：用于将按钮样式更改为浮动。

句法：

        Content

方法：

• 从官方网站下载 Angular MDBootstrap。
• 将文件解压缩到当前工作目录。
• 使用以下命令在当前项目中安装 npm：

npm install

• 创建项目文件夹后，即appname ，使用以下命令移动到该文件夹：

cd appname

• 使用以下命令启动服务器：

ng serve

项目结构：安装完成后如下图所示：

项目结构

示例 1：这是说明如何在 Angular MDBootstrap 中使用 Button 组件的基本示例。

app.component.html

    
GeeksforGeeks
    
Angular MDBootstrap Buttons Component
    

    
        Primary Button
    
    
        Secondary Button
    
    
        Success Button
    
    
        Danger Button
    
    

    
        Warning Button
    
    
        Info Button
    
    
        Light Button
    
    
        Dark Button
    

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  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{}

输出：

Angular MDBootstrap 按钮组件

示例 2：此示例说明了 Buttons 组件中的各种按钮样式。

app.component.html

    
GeeksforGeeks
    
Angular MDBootstrap Buttons Component
    

    
        Button with outline
    
    
        Large Button
     
    
        Small Button
     
    
        Disabled Button
    
    

    
        Gradient Button
    

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  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{}

输出：

Angular MDBootstrap 中的各种按钮样式

参考： https ://mdbootstrap.com/docs/angular/components/buttons