我对Angular不太熟悉，但我尝试过使用Angular Material
这是我在表参道举办的前端LT酒会上演讲的资料。
介绍一下自己
-
- 横内宏樹
-
- チームスピリットデザイナー
- 仕事とは別に趣味でサービス開発(AngularJS)を手伝っている
作为一名React专家，我还顺便（在业余时间）写AngularJS (^p^)
角 Material
-
- Material Designに沿って開発されたUIコンポーネント
-
- Material Designに忠実？
- Angular Teamによって開発されている
为什么引起了你的关注
-
- 手伝ってるサービス、BootstrapからMaterial Designへ移行したいと言われた
- ReactではMaterial UIを試食済み、辛かった。Angular Materialはどんな感じ？
这次我们要谈的是
-
- 適当に簡単に画面作ってみた
-
- やり方まとめて見た
AngularJSしらなくても適当に触れるようなチュートリアルになるようまとめた
教程
示例存储库
我制作了这样的画面（演示）
项目创建
前提是使用Angular CLI。
npm install -g @angular/cli
ng new example-angular-material && cd example-angular-material
引入 Angular Material
安装Angular材料和Angular CDK：
npm install –save @angular/material @angular/cdk
安装动画：
npm install –save @angular/animations
安装手势插件：
npm install –save hammerjs
主题加载
使用style.css文件导入预先构建的主题。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
有四种主题可供选择。
-
- deeppurple-amber.css
-
- indigo-pink.css
-
- pink-bluegrey.css
- purple-green.css
也可以自定义主题。更多详细信息请参考官方文档。
加载ICON
我会从index.html中加载
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
字体的加载
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
组件的导入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import 'hammerjs';
import {
MatAutocompleteModule,
// ... Componentのimport
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatAutocompleteModule,
// ... Componentのimport
],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML描述片段
全体都在这个Github页面上 Github
<mat-card class="exapmle-card">
<h2 class="mat-h2">Exapmle Data</h2>
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<div class="radio-group">
<label class="radio-group-label">Float label</label>
<mat-radio-group>
<mat-radio-button value="1">Option 1</mat-radio-button>
<mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>
</div>
<button mat-raised-button color="primary">Search</button>
</mat-card>
启动
ng serve
接触后的想法 1
-
- CSS、めっちゃ書く
-
- あくまでコンポーネントライブラリ
便利なUtility CSSなどない
サイズの調整オプションなどほとんど無い
パーツが少ない
触动后的感受 2
-
- コンポーネント同士を合わせて配置した場合に、いい感じにデザインを変えたり、レイアウトしてはくれることが少ない
-
- コンポーネントごとの完成度は高いと感じる、コードはきれい
-
- あくまでコンポーネントとして取り入れるつもりなら良さそう
Material Designの再現度は高い （と思う）
