Membuat UI dengan komponen reka bentuk bahan sudut

Tutorial ini memperkenalkan reka bentuk bahan sudut dan membimbing anda melalui membuat aplikasi sudut mudah dengan UI bahan. Memanfaatkan komponen pra-bina mempercepat pembangunan dan mewujudkan aplikasi yang berpandangan profesional.

Konsep Utama:

bahan sudut menyediakan satu set komponen UI yang komprehensif yang mematuhi prinsip reka bentuk bahan.
Prasyarat termasuk node.js (6.9.0), npm (3), dan cli sudut.
Pemasangan melibatkan menggunakan NPM untuk menambah bahan sudut dan kebergantungannya. Theming dicapai dengan mengimport tema pra-dibina atau mencipta satu adat.
komponen diimport secara modular ke dalam modul sudut anda.
Tutorial menunjukkan menggunakan butang, kad, jadual, dan bentuk.
Ciri -ciri canggih seperti gerak isyarat (melalui HammerJS) dan animasi (melalui
• ) meningkatkan pengalaman pengguna. @angular/animations

apakah reka bentuk bahan?

Reka bentuk bahan adalah bahasa reka bentuk untuk mencipta pengalaman digital di seluruh platform. Ia menyediakan prinsip dan garis panduan untuk interaktiviti, gerakan, dan komponen, menyelaraskan proses reka bentuk. Komponen bahan menawarkan modularity, tema, dan penyesuaian.

Gambaran Keseluruhan Bahan Angular:

Bahan Angular melaksanakan reka bentuk bahan untuk sudut. Ia termasuk komponen untuk:

borang (input, pilih, kotak semak, pemetik tarikh)
navigasi (menu, sidebars, bar alat)
susun atur (grid, kad, tab, senarai)
Butang, Petunjuk, Popup, Modal, dan Jadual Data.

Menyediakan persekitaran pembangunan anda:

Pastikan anda mempunyai Node.js (6.9.0) dan NPM (3) dipasang. Pasang CLI sudut:

npm install -g @angular/cli

Buat projek sudut baru:

ng new angularmaterialdemo

menghasilkan komponen:

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

Konfigurasikan penghalaan dalam

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

Memasang bahan sudut:

Pasang bahan sudut dan kebergantungannya:

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

import Hammerjs dalam

: src/main.ts

import 'hammerjs';

tambahkan tema ke

: styles.css

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

Tambahkan ikon bahan ke

: index.html

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

import

dalam BrowserAnimationsModule: src/app/app.module.ts

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

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

Mewujudkan modul bahan:

Buat

: src/app/material.module.ts

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 { }

import

ke MyMaterialModule. src/app/app.module.ts

Membina UI:

(pembinaan UI terperinci untuk app.component.html, login.component.html, customer-list.component.html, dan customer-create.component.html terlalu luas untuk dimasukkan ke sini. Sambutan asal memberikan butiran ini. Rujuk kepada contoh kod lengkap.) Tanggapan asal menyediakan contoh komprehensif menggunakan pelbagai komponen bahan sudut dalam komponen ini, termasuk pengendalian ralat dengan dialog modal dan pemberitahuan snackbar.

Kesimpulan:

Tutorial ini menyediakan asas untuk membina aplikasi sudut dengan UI reka bentuk bahan. Modulariti dan ciri-ciri luas bahan sudut dengan ketara meningkatkan kecekapan pembangunan dan mewujudkan aplikasi yang menarik dan mesra pengguna secara visual. Ingatlah untuk berunding dengan dokumentasi bahan sudut rasmi untuk butiran lanjut dan pilihan komponen.

Atas ialah kandungan terperinci Membuat UI dengan komponen reka bentuk bahan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!