Nauka Angular4 – Material Design Lite (MDL) – część 3

Google Material Design Lite (MDL) to frontendowy framework implementujący Material Design. Jak skorzystać z Material Design Lite w Angular4? Możesz go dodać do projektu w kilku prostych krokach.

Czym jest Material Design?

Material Design to podejście przy projektowaniu graficznych interfejsów. Założenia Material Design określa specyfikacja. Celem Material Design jest stworzenie wizualnego języka, który łączy fundamentalne podstawy projektowania z obecnymi możliwościami technologicznymi i naukowymi. Ważne w Material Design jest naśladowanie fizyki oraz ruch, dzięki którym użytkownik niezależnie od urządzenia jakiego urzywa, będzie rozumiał zachowanie aplikacji. Przykładowe komponenty można znaleźć na stronie getmdl.io.

Material Design Lite (MDL) w Angular4

Poniższe kroki opisując jak skorzystać z Material Design Lite w projekcie Angularowym.

Krok 1 – Instalacja modułu angular-mdl

W folderze z projektem Angular4 wykonaj z konsoli:

npm install @angular-mdl/core --save

Krok 2 – Zaimportuj MdlModule w app.module.ts

Zedytuj plik app.module.ts, najpierw zaimportuj nowy moduł:

import { MdlModule } from '@angular-mdl/core';

A następnie dodaj nowy moduł do @NgModule

@NgModule({
  declarations: [
     AppComponent
  ],
  imports: [
    &hellip;
    MdlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Krok 3 – Dodaj style Material Design Lite do SASSa

W głównym pliku ze stylami dodaj:

/*MD*/
@import "~@angular-mdl/core/scss/color-definitions";

$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;
$color-accent: $palette-amber-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;

@import '~@angular-mdl/core/scss/material-design-lite';

Krok 4 – Podepnij Font z Material Icons

W pliku index.html w sekcji head dodaj:

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot;&gt;

Krok 5 – Edycja tagów Material Design w HTML

W templatkach komponentów dodaj tagi Material Design np.

&lt;mdl-switch [(ngModel)]=&quot;checkbox33&quot; mdl-ripple&gt;Option 1&lt;/mdl-switch&gt;

Zachęcam do zapoznania się z poprzednimi wpisami na temat Angular4: Nauka Angular4/Angular2/TypeScript od podstaw – część 1 oraz Angular4 Services z Testami – czyli nauka Angulara część 2.