Angular MDC Web 项目教程

最新推荐文章于 2024-09-07 09:47:33 发布

倪澄莹George

最新推荐文章于 2024-09-07 09:47:33 发布

阅读量444

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00024/article/details/141986770

版权

Angular MDC Web 项目教程

angular-mdc-webAngular wrapper for Material Design (Web) Components项目地址:https://gitcode.com/gh_mirrors/an/angular-mdc-web

1. 项目介绍

Angular MDC Web 是一个基于 Material Components for the Web (MDC-Web) 的 Angular 组件库。它旨在帮助开发者快速构建符合 Material Design 规范的 Angular 应用。Angular MDC Web 提供了丰富的 UI 组件，如按钮、卡片、表单控件等，使得开发者能够轻松地将 Material Design 的设计理念融入到 Angular 项目中。

2. 项目快速启动

安装 Angular MDC Web

首先，确保你已经安装了 Angular CLI。如果没有安装，可以通过以下命令进行安装：

npm install -g @angular/cli

接下来，创建一个新的 Angular 项目：

ng new my-angular-mdc-app
cd my-angular-mdc-app

在项目目录中，安装 Angular MDC Web 库：

npm install @angular-mdc/web

配置 Angular MDC Web

在 angular.json 文件中，添加 MDC 的样式文件：

"styles": [
  "node_modules/@angular-mdc/web/css/material-components-web.min.css"
]

在 app.module.ts 中导入必要的模块：

import { MdcButtonModule } from '@angular-mdc/web/button';
import { MdcCardModule } from '@angular-mdc/web/card';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdcButtonModule,
    MdcCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 Angular MDC Web 组件

在 app.component.html 中添加一个按钮和一个卡片组件：

<mdc-button raised>Click Me</mdc-button>

<mdc-card>
  <mdc-card-primary-action>
    <mdc-card-media square class="demo-card__media--16-9"></mdc-card-media>
    <div class="demo-card__primary">
      <h2 class="demo-card__title" mdcHeadline6>Title</h2>
      <h3 class="demo-card__subtitle" mdcSubtitle2>Subtitle</h3>
    </div>
    <div class="demo-card__secondary" mdcBody2>
      This is a sample card content.
    </div>
  </mdc-card-primary-action>
</mdc-card>