Erstellen von UIs mit eckigen Materialkonstruktionskomponenten

Dieses Tutorial führt ein einkiges Materialdesign ein und führt Sie durch die Erstellung einer einfachen Winkelanwendung mit einer Material -Benutzeroberfläche. Die Nutzung vorgefertigter Komponenten beschleunigt die Entwicklung und schafft professionelle Anwendungen.

Schlüsselkonzepte:

• Winkelmaterial liefert einen umfassenden Satz von UI -Komponenten, die sich an Materialdesignprinzipien halten.
• Voraussetzungen umfassen Node.js (6.9.0), NPM (3) und die Winkel -Cli.
Bei der
• -Anstallation werden NPM verwendet, um Winkelmaterial und Abhängigkeiten hinzuzufügen. Das Thema wird erreicht, indem ein vorgefertigtes Thema importiert oder ein benutzerdefiniertes Erstellen erstellt wird.
• Komponenten werden modular in Ihre Winkelmodule importiert.
• Das Tutorial zeigt mit Tasten, Karten, Tischen und Formularen.
• Erweiterte Funktionen wie Gesten (über Hammerjs) und Animationen (über @angular/animations) verbessern die Benutzererfahrung.

Was ist Materialdesign?

Materialdesign ist eine Designsprache für die Erstellung digitaler Erlebnisse über Plattformen hinweg. Es enthält Prinzipien und Richtlinien für Interaktivität, Bewegung und Komponenten, wobei der Entwurfsprozess optimiert wird. Materialkomponenten bieten Modularität, Themen und Anpassung.

Winkelmaterialübersicht:

Winkelmaterial implementiert das Materialdesign für Winkel. Es enthält Komponenten für:

• Formulare (Eingänge, Auswahl, Kontrollkästchen, Datumsferter)
• Navigation (Menüs, Seitenleisten, Symbolleisten)
• Layout (Gitter, Karten, Registerkarten, Listen)
• Schaltflächen, Indikatoren, Popups, Modale und Datentabellen.

Einrichten Ihrer Entwicklungsumgebung:

Stellen Sie sicher, dass Sie Node.js (6.9.0) und NPM (3) installiert haben. Installieren Sie die Winkel -Cli:

<code class="language-bash">npm install -g @angular/cli</code>

Erstellen Sie ein neues Winkelprojekt:

<code class="language-bash">ng new angularmaterialdemo</code>

Komponenten erzeugen:

<code class="language-bash">ng g component login
ng g component CustomerList
ng g component CustomerCreate</code>

Routing in src/app/app.module.ts:

konfigurieren

<code class="language-typescript">// ... 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)
],
// ...</code>

Installieren von Winkelmaterial:

Installieren Sie Winkelmaterial und seine Abhängigkeiten:

<code class="language-bash">npm install --save @angular/material @angular/cdk @angular/animations hammerjs</code>

importieren Hammerjs in src/main.ts:

<code class="language-typescript">import 'hammerjs';</code>

Fügen Sie styles.css:

ein Thema hinzu

<code class="language-css">@import "~@angular/material/prebuilt-themes/indigo-pink.css";</code>

Materialsymbole zu index.html:

hinzufügen

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

import BrowserAnimationsModule in src/app/app.module.ts:

<code class="language-typescript">import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// ... @NgModule ...
imports: [
  // ... other imports ...
  BrowserAnimationsModule
],
// ...</code>

Erstellen eines Materialmoduls:

erstellen src/app/material.module.ts:

<code class="language-typescript">import { NgModule } from '@angular/core';
import { MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule, MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule, MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule, MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule } from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule,
    MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule,
    MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule
  ],
  exports: [
    MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule,
    MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule,
    MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule
  ]
})
export class MyMaterialModule { }</code>

import MyMaterialModule in src/app/app.module.ts.

Erstellen Sie die Benutzeroberfläche:

(Die detaillierte UI -Konstruktion für app.component.html, login.component.html, customer-list.component.html und customer-create.component.html ist zu umfangreich, um hier einzuschließen. Die ursprüngliche Antwort enthält dieses Detail. Weitere Informationen finden Sie auf den vollständigen Code -Beispielen.) Die Beispiele für die vollständigen Code.) Die Auszeichnung. Die ursprüngliche Antwort liefert umfassende Beispiele für die Verwendung verschiedener Winkelmaterialkomponenten in diesen Komponenten, einschließlich der Fehlerbehandlung mit modalen Dialogen und Snackbarbenachrichtigungen.

Schlussfolgerung:

Dieses Tutorial bietet eine Grundlage für den Bau von Winkelanwendungen mit einer Materialdesign -Benutzeroberfläche. Die Modularität und die umfangreichen Merkmale von Winkelmaterial verbessern die Entwicklungseffizienz erheblich und schaffen visuell ansprechende und benutzerfreundliche Anwendungen. Denken Sie daran, die offizielle Dokumentation des Angular -Materials zu konsultieren, um weitere Details und Komponentenoptionen zu erhalten.

Das obige ist der detaillierte Inhalt vonErstellen von UIs mit eckigen Materialkonstruktionskomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!