用角材料設計組件創建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中文網其他相關文章！