Hej, W tym wpisie zrobimy trzon dashboardu, w którym wykorzystamy angular-material. Do dzieła!

Angular Material 2

Zacznijmy od dodania angular-material:

yarn add @angular/material

Następnie musimy zaktualizować nasz plik app.module.ts:

import {NgModule} from '@angular/core';
import {MaterialModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
//...

@NgModule({
  //...
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    MaterialModule
  ],
  //...
})
export class AppModule {}

Dodatkowo musimy zaimportować style z nowego modułu:

/* You can add global styles to this file, and also import other style files */
@import '../node_modules/normalize.scss/normalize.scss';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

I już możemy brać się do pracy 🙂

Ustawianie dashboardu 

Do zrobienia dashboardu użyjemy m.in.:

  • Sidenav – z niego zrobimy nawigację po lewej stronie
  • Toolbar – pasek u góry strony

Całość struktury HTML przedstawia się tak:

<md-toolbar class="navigation--top">
    <a href="/" class="navigation--top__logo" md-button>
        <h1 class="navigation--top__title">Self Review</h1>
    </a>
    <div class="navigation--top__content">
        <a href="#" md-button (click)="sidenav.toggle()">
            <md-icon>menu</md-icon>
        </a>
    </div>
</md-toolbar>
<md-sidenav-container>
    <md-sidenav #sidenav mode="side" opened="true" class="navigation--left">
        <a href="#" md-button class="navigation__link">Link 1</a>
        <a href="#" md-button class="navigation__link">Link 2</a>
        <a href="#" md-button class="navigation__link">Link 3</a>
        <a href="#" md-button class="navigation__link">Link 4</a>
    </md-sidenav>
    <main class="app__content">
        <h1>{{title}}</h1>
        <button (click)="getFortune()" md-button>Click me to see fortune cookie!</button>
        <h2>{{fortuneCookie}}</h2>
    </main>
</md-sidenav-container>

Jak widać struktura nie jest skomplikowana. Do definiowania klas użyłem metody BEM, o której możecie więcej przeczytać na tej stronie.

W linii 6 napisałem ‚sidenav.toggle()’. Angular 2 jest na tyle sprytny że wyszukuje w drzewie element z id ‚sidenav’ i znajduje go przy linijce 12 i dodaje do niego zdarzenie click. Ten element ma wbudowane metody do obsługi sidenav takie jak open, close, toggle i po kliknięciu na hamburgera menu po lewej stronie będzie się chować i pojawiać – po ponownym kliknięciu.

Pora na style do naszego dashboardu:

$toolbar-height: 64px;
$navigation-left-width: 200px;
$navigation-color: #2c3e50;

md-sidenav-container{
  padding-top: $toolbar-height;
}

.app__content{
  padding: 15px;
  box-shadow: 0 0 10px 1px #ccc;
  min-height: 100%;
  margin: 10px;
}

.navigation {
  &--top,
  &--left{
    color: white;
  }

  &--top {
    position: fixed;
    top: 0;
    height: $toolbar-height;
    width: 100%;
    z-index: 10;
    background: $navigation-color;
    box-shadow: 2px -2px 10px 2px rgba(black, 0.5);
    padding: 0;

    &__logo{
      width: $navigation-left-width;
      text-align: center;
      background: darken($navigation-color, 2%);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    &__title{
      font-size: 1.6rem;
      text-transform: none;
      margin: 0;
    }
  }

  &--left {
    width: $navigation-left-width;
    top: $toolbar-height;
    background: darken($navigation-color, 4%);
  }

  &__link {
    display: block;
    width: 100%;
    transition: .3s;
    padding: 10px;
  }
}

I to na razie tyle.  Jak widać dashboard prezentuje się zdecydowanie lepiej 🙂

Wszystkie zmiany są już na githubie.

W kolejnym etapie zajmiemy się podpięciem routingu pod nasz projekt. A także uporządkowaniem nieco struktury plików. Do zobaczenia!