zoukankan      html  css  js  c++  java
  • [Angular] Angular CDK Intro

    1. Installl latest @angular/cli:

    sudo npm i -g @angular/cli@next

    The version I used is:6.0.0-rc.10

    2. Create a new application:

    ng new cdk-demo --routing

    3. Install material and cdk packages:

    Here need to add @next, because by the time I tried the application, v6 angular is not released yet.

    npm install --save @angular/material@next @angular/cdk@next

    4. Using 'ng add' to add material to the application:

    ng add @angular/material

    This command did some changes to the project, add some necessary code and files, which makes the whole process lot easier.

    5. Update some code:

    app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    import { MatCheckboxModule } from '@angular/material'; // <-- added
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatCheckboxModule, // <-- added
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    app.component.html:

    <mat-checkbox>Toggle</mat-checkbox>

    Then you should be able to see a toggle element on the page.

    The progress was much better than before.

    But even more awesome stuff is the following.

    6. Genearte a material based component by using cli:

    ng g @angular/material:materialNav --name=main-nav

    Then just use it in the app.component.html:

    <main-nav></main-nav>

    We can also do:

    ng g @angular/material:material-table --name=main-table
    ng g @angular/material:material-dashboard --name=main-dash

    Then use it inside the main-nav we have just created:<mat-sidenav-container class="sidenav-container">

      <mat-sidenav
        #drawer
        class="sidenav"
        fixedInViewport="true"
        [attr.role]="isHandset ? 'dialog' : 'navigation'"
        [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
        [opened]="!(isHandset | async)!.matches">
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
          <a mat-list-item href="#">Link 1</a>
          <a mat-list-item href="#">Link 2</a>
          <a mat-list-item href="#">Link 3</a>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <mat-toolbar color="primary">
          <button
            type="button"
            aria-label="Toggle sidenav"
            mat-icon-button
            (click)="drawer.toggle()"
            *ngIf="(isHandset | async)!.matches">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span>Application Title</span>
        </mat-toolbar>
    
        <main-dash></main-dash> <!--  added -->

    </mat-sidenav-content> </mat-sidenav-container>
  • 相关阅读:
    【JS】修改字体
    【git】.gitignore文件常用设置
    【CSS】让textarea在div里水平垂直都居中的三种办法
    【JS】随着进度条进展,逐个显示li节点
    【MySQL】The server time zone value 'xxxxxx' is unrecognized or represents more than one time zone 解决方案
    浅谈Web前端开发中的Touch事件
    [转]PostgreSQL与MySQL比较
    RDLC:An error occurred during local report processing
    [转]让你的PHP更安全
    [转]Win7或Windows server 2008中IIS7支持ASP+Access解决方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8987136.html
Copyright © 2011-2022 走看看