用角材料设计组件创建UIS

>本教程介绍了角度的材料设计，并指导您使用材料UI创建简单的角度应用。 利用预先构建的组件加快开发并创建外观专业的应用程序。

密钥概念：

>先决条件包括node.js（6.9.0），npm（3）和角cli。

>安装涉及使用NPM添加角材料及其依赖项。 主题是通过导入预先构建的主题或创建自定义主题来实现的。

组件被模块化导入到您的角模块中。

教程使用按钮，卡，表和表格演示。

高级功能，例如手势（通过hammerjs）和动画（通过

）增强用户体验。

什么是材料设计？

材料设计是一种设计语言，用于跨平台创建数字体验。它提供了简化设计过程的交互性，运动和组件的原理和准则。材料组件提供模块化，主题和自定义。

@angular/animations角度材料概述：

>表格（输入，选择，复选框，日期选择器）

>导航（菜单，侧栏，工具栏）

>布局（网格，卡片，选项卡，列表）

>按钮，指示器，弹出式，模式和数据表。

设置开发环境：

>
• 确保您安装了Node.js（6.9.0）和NPM（3）。安装Angular CLI：
创建一个新的角度项目：
• 生成组件：

中的配置路由：>

安装角材料：

npm install -g @angular/cli

>

安装角质材料及其依赖性：

ng new angularmaterialdemo

中的导入hammerjs：

ng g component login
ng g component CustomerList
ng g component CustomerCreate

>

在 src/app/app.module.ts

将材料图标添加到

// ... imports ...
import { RouterModule, Routes } from '@angular/router';
// ...

const appRoutes: Routes = [
  { path: 'customer-list', component: CustomerListComponent },
  { path: 'customer-create', component: CustomerCreateComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

// ... @NgModule ...
imports: [
  // ... other imports ...
  RouterModule.forRoot(appRoutes)
],
// ...

>：

import

in

：

npm install --save @angular/material @angular/cdk @angular/animations hammerjs

src/main.ts创建一个材料模块：

>

import 'hammerjs';

创建

：styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

import

进入index.html。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

构建UI：>

（app.component.html>，，和login.component.html>的详细UI构造太广泛而无法包含在这里。原始响应提供了此详细信息。有关完整的代码示例，请参阅此详细信息。）原始响应提供了使用这些组件中使用各种角度材料组件的全面示例，包括使用模态对话框和Snackbar通知进行错误处理。customer-list.component.html> customer-create.component.html

结论：

本教程为使用材料设计UI构建角度应用提供了基础。 角度材料的模块化和广泛特征可显着提高开发效率，并创建视觉上吸引人和用户友好的应用程序。请记住要查阅官方的角材料文档以获取更多详细信息和组件选项。>

以上是用角材料设计组件创建UIS的详细内容。更多信息请关注PHP中文网其他相关文章！