角度材质模块 - Javascript

Angular Material是一个基于Google Material设计概念的UI库，提供UI组件和交互性的框架，使用AngularJS实现。

特点

• 基于Google Material设计概念，风格美观、统一
• 提供丰富的UI组件和交互性框架，包含弹出框、工具栏、菜单、卡片等
• 支持响应式设计，适应各种设备
• 集成AngularJS的动画系统
• 提供基于SASS变量的样式定制能力
• 易于使用和扩展

安装

1. 在AngularJS项目中使用npm安装Angular Material

   npm install  angular-material --save
   

2. 引入Angular Material

   <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.material/1.1.9/angular-material.min.css">
   <script src="//cdn.jsdelivr.net/angular.material/1.1.9/angular-material.min.js"></script>
   

用法

以引入一个按钮为例：

1. 在应用程序模块中添加Angular Material的依赖

   angular.module('myApp', ['ngMaterial']);
   

2. 在Html页面中使用md-button指令

   <md-button class="md-raised">Click me!</md-button>
   

   md-raised类为按钮提供了一个立体效果。

样式定制

可以通过修改SASS变量来修改Angular Material的样式效果。比如，以下是修改主色的方法：

1. 添加_sass文件夹到项目中并重命名为custom-theme.scss

2. 引入Angular Material的样式

   @import '~angular-material/angular-material';
   

3. 修改主色变量

   $md-primary-color: #4CAF50;
   

4. 在应用程序模块中引用重写的主题：

   angular.module('myApp', ['ngMaterial'])
       .config(function ($mdThemingProvider) {
           $mdThemingProvider.theme('default')
               .primaryPalette('green');
       });
   

总结

Angular Material提供了大量的UI组件和交互性的框架，可以帮助开发人员快速构建美观的Web应用，并提供样式定制能力。它易于使用和扩展，尤其是与AngularJS结合使用时，可以为项目节省大量时间和精力。