角張った材料設計コンポーネントを使用してUISを作成します

このチュートリアルでは、Angular Material Designを紹介し、材料UIを使用してシンプルな角度アプリケーションを作成することをガイドします。 事前に構築されたコンポーネントを活用すると、開発の速度が高まり、プロフェッショナルなアプリケーションが作成されます

重要な概念：

角度材料は、材料設計の原則に準拠した包括的な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

角度材料とその依存関係を取り付けます：

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)
],
// ...

にhammerjsをインポートします

テーマを：

に追加します

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

：

にマテリアルアイコンを追加します src/main.ts

インポート

import 'hammerjs';

in

：styles.css

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

マテリアルモジュールの作成：index.html

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

create

：BrowserAnimationsModule src/app/app.module.ts

インポート

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// ... @NgModule ...
imports: [
  // ... other imports ...
  BrowserAnimationsModule
],
// ...

に

。にインポートします

uiの構築：

src/app/material.module.ts

（app.component.html、login.component.html、customer-list.component.html、およびcustomer-create.component.htmlの詳細なUI構造は、ここに含めるには広すぎます。元の応答はこの詳細を提供します。完全なコードの例については、それを参照してください。）元の応答は、モーダルダイアログやスナックバー通知を使用したエラー処理など、これらのコンポーネント内でさまざまな角度材料コンポーネントを使用する包括的な例を提供します。

結論：

このチュートリアルは、材料設計UIを備えた角度アプリケーションを構築するための基盤を提供します。 角度材料のモジュール性と広範な機能により、開発効率が大幅に向上し、視覚的に魅力的でユーザーフレンドリーなアプリケーションが作成されます。詳細とコンポーネントのオプションについては、公式の角度材料のドキュメントを参照してください。

以上が角張った材料設計コンポーネントを使用してUISを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。