File

src/app/todo/todo-sidenav/todo-sidenav.component.ts

Metadata

selector	`app-todo-sidenav`
styleUrls	`./todo-sidenav.component.scss`
templateUrl	`./todo-sidenav.component.html`

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-sidenav',
  templateUrl: './todo-sidenav.component.html',
  styleUrls: ['./todo-sidenav.component.scss']
})
export class TodoSidenavComponent {}

<div class="header p-20" fxLayout="column" fxLayoutAlign="space-between start">
  <div class="todo-logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
    <mat-icon class="mat-18 todo-logo-icon">check_box</mat-icon>
    <span class="todo-logo-text">Todo</span>
  </div>
</div>

<div fxLayout="column">
  <button mat-raised-button class="todo-add-button">添加任务</button>

  <mat-nav-list class="nav-list">
    <mat-list-item class="nav-list-item active">
      <mat-icon mat-list-icon>view_headline</mat-icon>
      <h4 mat-line>全部</h4>
    </mat-list-item>
    <mat-list-item class="nav-list-item">
      <mat-icon mat-list-icon>schedule</mat-icon>
      <h4 mat-line>未完成</h4>
    </mat-list-item>
    <mat-list-item class="nav-list-item">
      <mat-icon mat-list-icon>check</mat-icon>
      <h4 mat-line>已完成</h4>
    </mat-list-item>
  </mat-nav-list>

</div>

./todo-sidenav.component.scss

:host {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  color: #fff;
}

.todo-logo {
  &-icon {
    margin-right: 16px;
  }
  &-text {
    font-size: 24px;
    line-height: 24px;
  }
}

.todo-add-button {
  margin: 20px;
}

.nav-list-item {
  &.active {
    background-color: #3f51b5;
    color: #fff;
  }
}

Legend

Html element

Component

Html element with directive

File

Metadata

result-matching ""

No results matching ""