Wojciech KaliszewskiAngular, Kurs Angular 43 komentarze

Cześć, po dłuższej przerwie spowodowanej urlopem, wracam do pisania. Dziś zajmiemy się głownie własnymi stylami do MD, a także instalacją FlexBox’a. Widok napiszemy na razie w jednym komponencie, a w nadchodzącej lekcji  będziemy go dzielić na mniejsze. Zaczynajmy…

W czasie pisania tego kursu projekt Angular Material cały czas się rozwija. Postępy tego projektu można śledzić na GitHubie. Natomiast dla naszych potrzeb będziemy potrzebować dokumentacji poszczególnych komponentów. Całość znajdziemy na tej stronie: https://material.angular.io/components

Ze względu na ciągły rozwój projektu co jakiś czas, będziemy musieli odświeżyć nasz package.json poleceniem:

npm install

a następnie by uruchomić nasz program.

ng serve

W obecnej sytuacji, jeśli wcześniej nic nie zmienialiśmy, pojawi nam się błąd że Angular nie będzie mógł znaleźć  angular/cdk.  Można to naprawić instalując odpowiednią paczkę:

[sourcecode language=”plain”]npm install –save @angular/material @angular/cdk [/sourcecode]

1. FlexBox

Na początku zainstalujemy FlexBoxa. W konsoli wchodzimy do katalogu z nasz pracą i wklejamy:

npm i @angular/flex-layout

Teraz w pliku app.module.ts musimy zaimportować FlexBoxa do projektu, dodajemy wiec linijkę:

import { FlexLayoutModule } from '@angular/flex-layout'
Potem wdrożamy nasz moduł do tablicy „imports”
Cały plik powinien wyglądać tak:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Własne style w Material Design

W poprzednich lekcjach w pliku style.scss mieliśmy zaimportowane gotowy zestaw styli:

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

Jednakże dobrze by było byśmy mogli mieć pełną kontrole nad takim zestawem styli, lub napisali go sami. Możemy tu wybrać sobie odpowiednią paletę barw.
Pierwsze co robimy to stwarzamy nowy folder w folderze „src” i nazywamy go style. Kopiujemy tam plik styles.scss. Kiedy już to zrobimy tworzymy plik sccs dla naszego nowego zestawu styli, który dalej będę nazywał „tematem”. Na razie będzie zawierał paletę głównych kolorów. Niech nazywa się: custom-theme.scss.

Gdy już go utworzymy, w pliku style.scss musimy nasz „custom-theme” zaimportować:

@import './custom-theme'

Zmieniliśmy tu ścieżkę do naszego głównego pliku scss wrzucając go do folderu, dlatego w angular.json musimy zmienić ścieżkę:

"styles": [
"src/style/styles.scss"
],

Powracamy do custom-theme.scss . Wstawiamy tam takie style:

@import '~@angular/material/theming';
@include mat-core();

$foodCalc-primary: (
50 : #e0f2f1,
100 : #b3e0db,
200 : #80cbc4,
300 : #4db6ac,
400 : #26a69a,
500 : #009688,
600 : #008e80,
700 : #008375,
800 : #00796b,
900 : #006858,
A100 : #97ffec,
A200 : #64ffe3,
A400 : #31ffda,
A700 : #18ffd5,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);

$foodCalc-secondary: (
50 : #e8e5e5,
100 : #c5bebd,
200 : #9f9391,
300 : #786865,
400 : #5b4744,
500 : #3e2723,
600 : #38231f,
700 : #301d1a,
800 : #281715,
900 : #1b0e0c,
A100 : #ff6b5d,
A200 : #ff3d2a,
A400 : #f61600,
A700 : #dc1400,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);

$foodCalc-warning: (
50 : #fff6e1,
100 : #ffe9b3,
200 : #ffdb81,
300 : #ffcd4f,
400 : #ffc229,
500 : #ffb703,
600 : #ffb003,
700 : #ffa702,
800 : #ff9f02,
900 : #ff9001,
A100 : #ffffff,
A200 : #fff9f2,
A400 : #ffe0bf,
A700 : #ffd4a6,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);

$foodCalc-error: (
50 : #fdebe5,
100 : #facdbd,
200 : #f7ac91,
300 : #f48a65,
400 : #f17144,
500 : #ef5823,
600 : #ed501f,
700 : #eb471a,
800 : #e83d15,
900 : #e42d0c,
A100 : #ffffff,
A200 : #ffe0db,
A400 : #ffb3a8,
A700 : #ff9c8f,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);

$foodCalc-success: (
50 : #e1f8ee,
100 : #b4edd4,
200 : #83e1b8,
300 : #51d59c,
400 : #2bcc86,
500 : #06c371,
600 : #05bd69,
700 : #04b55e,
800 : #03ae54,
900 : #02a142,
A100 : #cbffdd,
A200 : #98ffbb,
A400 : #65ff99,
A700 : #4cff88,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);

$my-app-primary: mat-palette($foodCalc-primary, 500);
$my-app-accent: mat-palette($foodCalc-secondary, 500, 900, A100);
$my-app-warn: mat-palette($foodCalc-warning);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

Jak tworzymy taki temat, będę opisywał w innym poście.

Kiedy mamy już stworzoną naszą paletę w Material Design możemy zabrać się za …

2. Dashboard

Tak jak napisałem wyżej, widok aplikacji będzie znajdował się na razie w jednym pliku. Chodzi o to, byś zobaczył w jaki sposób działa Angular Material. Robię to by nie mieszać Ci w głowie i nie wrzucać za dużo wiadomości na raz. Wszystko po kolei w małych porcjach:)

Naszą pracę rozpoczynamy w pliku app.component.html, będzie to nasz główny komponent. Już napisałem wstęp do widoku, tak aby nasz aplikacja już jakoś wyglądała. Zatem główny komponent app.component.html będzie wyglądał tak:

<header>
  <mat-toolbar color="primary">
    <div class="app-logo">
      <h1>FoodCalc</h1>
      <h2>{{title}}</h2>
    </div>
    <div fxFlex></div>
    <div>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>person</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <mat-icon>fingerprint</mat-icon>
          <span>Login</span>
        </button>
        <button mat-menu-item disabled>
          <mat-icon>close</mat-icon>
          <span>Logaut</span>
        </button>
        <button mat-menu-item>
          <mat-icon>content_paste</mat-icon>
          <span>Registration</span>
        </button>
      </mat-menu>
    </div>
  </mat-toolbar>
</header>
<section id="main" class="main" fxLayout='row'>
  <section class="sidebar" fxFlex="220px">
    <div class="main-menu-header">
      <div fxLayout='row' fxFlex="200px">
        <div fxFlex="33%">
          <button mat-mini-fab>
            <mat-icon color="primary">message</mat-icon>
          </button>
        </div>
        <div fxFlex="33%">
          <button mat-mini-fab>
            <mat-icon>favorite</mat-icon>
          </button>
        </div>
        <div fxFlex="33%">
          <button mat-mini-fab>
            <mat-icon>list</mat-icon>
          </button>
        </div>
      </div>
    </div>
    <div class="main-menu">
      <mat-list>
        <h3 mat-subheader>Navigation</h3>
        <mat-list-item>
          <mat-icon mat-list-icon>dashboard</mat-icon>
          <h4 mat-line>
            <a href="#">Dashboard</a>
          </h4>
        </mat-list-item>
        <mat-list-item>
          <mat-icon mat-list-icon>featured_play_list</mat-icon>
          <h4 mat-line>
            <a href="#">Moja lista produktów</a>
          </h4>
        </mat-list-item>
        <mat-list-item>
          <mat-icon mat-list-icon>wb_sunnyt</mat-icon>
          <h4 mat-line>
            <a href="#">Produkty sezonowe</a>
          </h4>
        </mat-list-item>
        <mat-divider></mat-divider>
        <h3 mat-subheader>Notes</h3>
        <mat-list-item>
          <mat-icon mat-list-icon>note</mat-icon>
          <h4 mat-line>
            <a href="#">Notatki</a>
          </h4>
        </mat-list-item>
      </mat-list>
    </div>
  </section>
  <section class="content" fxFlex>
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar>
          <mat-icon mat-list-icon>accessibility</mat-icon>
        </div>
        <mat-card-title>Mój bilans dnia</mat-card-title>
        <mat-card-subtitle>
          <mat-chip-list>
            <mat-chip>Kalorie: 2500</mat-chip>
            <mat-chip>Węglowodany: 120</mat-chip>
            <mat-chip color="primary" selected="true">Białko: 23</mat-chip>
            <mat-chip color="accent" selected="true">Tłuszcze: 340</mat-chip>
          </mat-chip-list>
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>
          Wybierz porę posiłku i dodawaj produkty. Licz kalorie i sprawdz swój dzieny bilans składnoków odżywczych.
        </p>
        <mat-tab-group>
          <mat-tab label="Śniadanie">Content 1</mat-tab>
          <mat-tab label="Drugie śnadanie">Content 2</mat-tab>
          <mat-tab label="Obiad/Lunch">Content 2</mat-tab>
          <mat-tab label="Podwieczorek">Content 2</mat-tab>
          <mat-tab label="Kolacja">Content 2</mat-tab>
          <mat-tab label="Przegryzka">Content 2</mat-tab>
        </mat-tab-group>
      </mat-card-content>
    </mat-card>
  </section>
</section>

Dodajmy jeszcze style w pliku app.component.scss. Na początek będzie ich mało.

header {
  position: relative;
  height: 220px;
  background: #009688;
}
:host /deep/ {
  .mat-toolbar-single-row {
    height: 120px;
    padding: 20px 0 20px 50px;
  }
}
.app-logo {
  h1 {
    font-size: 36px;
  }
  h2 {
  font-size: 12px;
  }
}
.main {
  padding:0 30px 0 66px;
  margin-top: -75px;
}
:host /deep/ .mat-list {
  margin-top: 65px;
}
:host /deep/ .mat-list-item .mat-list-item-content {
  padding: 0px;
}
.content {
  padding: 0 0 0 30px;
}

W głównym komponencie znalazło się się sporo nowych modułów takich jak : ikony, listy, taby, chipsy które musimy zaimplementować w głównym module.

app.module.ts wygląda zatem tak:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule,
  MatCardModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatListModule,
  MatChipsModule,
  MatTableModule,
  MatTabsModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatChipsModule,
    MatTableModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aby dopełnić całości w pliku app.component.ts w klasie AppComponent przypiszmy naszej zmiennej title wartość: ‚Kalkulator składników żywnościowych’, albo co nam się podoba:)

Całość powinna wyglądać tak:

Co dalej? Mamy już widok jak mniej więcej będzie wyglądała aplikacja. W następnych wpisach będę starał się podzielić kod na mniejsze komponenty, tak byśmy zrozumieli na czym polega praca z komponentami.

Od tego wpisu będę zawsze na końcu zamieszczał notatki i źródła oraz opisywał je.

Zapraszam do komentowania i dzielenia się spostrzeżeniami. Gdyby pojawiły się pytania, napisz:)

Notatki:

  • https://material.io/icons/ – ikony do Material Design
  • https://github.com/mbitson/mcg , http://mcg.mbitson.com/ generator palety do Material Design

Źródła:

  • https://material.angular.io/components komponenty do MD
  • https://github.com/angular/material2 dokumentacja do Material Design for Angular
  • https://github.com/angular/flex-layout/wiki/Declarative-API-Overview dokumentacja do FlexBoxa którego używamy razem z MD

Wojciech Kaliszewski

POWIĄZANE ARTYKUŁY
Kurs Angular Material – cz.9 Routing (cz.3)
Kurs Angular Material – cz.8 Routing (cz.2)
Kurs Angular Material – cz.7 Routing (cz.1)

3 thoughts on “Kurs Angular Material – cz.4 Material design- Własne style”

  • Gosc

    Szkoda że od września nic się nie dzieje

    Odpowiedz
    • Wojciech Kaliszewski

      Już się dzieje, przepraszam za przerwę:(

      Odpowiedz
  • Afterweb

    Książka z pierwszego zdjęcia godna polecenia 🙂

    Odpowiedz

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *