邵佳豪
4 years ago
26 changed files with 1 additions and 382 deletions
@ -1,12 +0,0 @@ |
|||||||
<mat-card> |
|
||||||
<mat-card-title>简单的卡片</mat-card-title> |
|
||||||
<mat-card-subtitle>卡片的字幕</mat-card-subtitle> |
|
||||||
<mat-card-content>原来爱情的世界很大,大得可以装下一百种委屈;原来爱情的世界很小,小得三个人就会窒息。</mat-card-content> |
|
||||||
<img mat-card-image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579480490&di=f80c114e78ea7a439c19cc7f1622227f&src=http://pic1.win4000.com/wallpaper/2017-11-17/5a0e94afc140c.jpg"> |
|
||||||
<mat-card-actions> |
|
||||||
<button mat-raised-button color="primary">我是按钮</button> |
|
||||||
</mat-card-actions> |
|
||||||
<mat-card-footer> |
|
||||||
我要被固定在卡片底部 |
|
||||||
</mat-card-footer> |
|
||||||
</mat-card> |
|
@ -1,10 +0,0 @@ |
|||||||
|
|
||||||
mat-card{ |
|
||||||
width: 300px; |
|
||||||
height: 600px; |
|
||||||
img{ |
|
||||||
width: 300px; |
|
||||||
height: 300px; |
|
||||||
padding: 16px; |
|
||||||
} |
|
||||||
} |
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { CardComponent } from './card.component'; |
|
||||||
|
|
||||||
describe('CardComponent', () => { |
|
||||||
let component: CardComponent; |
|
||||||
let fixture: ComponentFixture<CardComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ CardComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(CardComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-card', |
|
||||||
templateUrl: './card.component.html', |
|
||||||
styleUrls: ['./card.component.scss'] |
|
||||||
}) |
|
||||||
export class CardComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1 +0,0 @@ |
|||||||
<!-- <iframe src="unityApp/index.html" name="unityApp" frameborder="0" width="100%" height="100%"></iframe> --> |
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { PlanComponent } from './plan.component'; |
|
||||||
|
|
||||||
describe('PlanComponent', () => { |
|
||||||
let component: PlanComponent; |
|
||||||
let fixture: ComponentFixture<PlanComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ PlanComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(PlanComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-plan', |
|
||||||
templateUrl: './plan.component.html', |
|
||||||
styleUrls: ['./plan.component.scss'] |
|
||||||
}) |
|
||||||
export class PlanComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit(): void { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,13 +0,0 @@ |
|||||||
<mat-spinner color="warn"></mat-spinner> |
|
||||||
<br> |
|
||||||
<h1>确定进度条</h1> |
|
||||||
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar> |
|
||||||
<br> |
|
||||||
<h1>不确定进度条</h1> |
|
||||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar> |
|
||||||
<br> |
|
||||||
<h1>缓冲进度条</h1> |
|
||||||
<mat-progress-bar mode="buffer"></mat-progress-bar> |
|
||||||
<br> |
|
||||||
<h1>查询进度条</h1> |
|
||||||
<mat-progress-bar mode="query"></mat-progress-bar> |
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { ProgressComponent } from './progress.component'; |
|
||||||
|
|
||||||
describe('ProgressComponent', () => { |
|
||||||
let component: ProgressComponent; |
|
||||||
let fixture: ComponentFixture<ProgressComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ ProgressComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(ProgressComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-progress', |
|
||||||
templateUrl: './progress.component.html', |
|
||||||
styleUrls: ['./progress.component.scss'] |
|
||||||
}) |
|
||||||
export class ProgressComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,10 +0,0 @@ |
|||||||
<p>底部提示消息</p> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput value="哈哈" placeholder="提示信息1" #message> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<mat-form-field> |
|
||||||
<input matInput value="嘻嘻" placeholder="提示信息2" #action> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<button mat-button (click)="openSnackBar(message.value, action.value)">显示出来吧!</button> |
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { SnackbarComponent } from './snackbar.component'; |
|
||||||
|
|
||||||
describe('SnackbarComponent', () => { |
|
||||||
let component: SnackbarComponent; |
|
||||||
let fixture: ComponentFixture<SnackbarComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ SnackbarComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(SnackbarComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,19 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import {MatSnackBar} from '@angular/material/snack-bar'; |
|
||||||
@Component({ |
|
||||||
selector: 'app-snackbar', |
|
||||||
templateUrl: './snackbar.component.html', |
|
||||||
styleUrls: ['./snackbar.component.scss'] |
|
||||||
}) |
|
||||||
export class SnackbarComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private _snackBar: MatSnackBar) { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
openSnackBar(message: string, action: string) { |
|
||||||
this._snackBar.open(message, action, { |
|
||||||
duration: 2000, |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
@ -1,51 +0,0 @@ |
|||||||
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear"> |
|
||||||
{{!isLinear ? '切换为线性' : '切换为非线性'}} |
|
||||||
</button> |
|
||||||
<!-- 整个流程总标签 --> |
|
||||||
<!-- mat-vertical-stepper是垂直方向 --> |
|
||||||
<!-- labelPosition可以定义标签位置 --> |
|
||||||
<!-- linear控制只有在完成前面步骤才可以进行后续步骤 --> |
|
||||||
<mat-horizontal-stepper [linear]="isLinear" #stepper> |
|
||||||
<!-- 第一步 --> |
|
||||||
<!-- stepControl检查步骤有效性 --> |
|
||||||
<mat-step [stepControl]="firstFormGroup"> |
|
||||||
<form [formGroup]="firstFormGroup"> |
|
||||||
<ng-template matStepLabel>填写姓名</ng-template> |
|
||||||
<mat-form-field> |
|
||||||
<!-- 指定控制器名称 --> |
|
||||||
<!-- 过滤器-必填 --> |
|
||||||
<input matInput placeholder="姓名" formControlName="firstCtrl" required> |
|
||||||
</mat-form-field> |
|
||||||
<div> |
|
||||||
<!-- 必须添加type="button"防止提交 --> |
|
||||||
<button mat-button matStepperNext type="button">下一步</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</mat-step> |
|
||||||
<!-- 第二步 --> |
|
||||||
<!-- optional属性表示可选 --> |
|
||||||
<mat-step [stepControl]="secondFormGroup" optional="true"> |
|
||||||
<form [formGroup]="secondFormGroup"> |
|
||||||
<ng-template matStepLabel>家庭住址</ng-template> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput placeholder="住址" formControlName="secondCtrl" required> |
|
||||||
</mat-form-field> |
|
||||||
<div> |
|
||||||
<!-- 步骤按钮 --> |
|
||||||
<button mat-button matStepperPrevious type="button">上一步</button> |
|
||||||
<button mat-button matStepperNext type="button">下一步</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</mat-step> |
|
||||||
<!-- 第三步 --> |
|
||||||
<mat-step> |
|
||||||
<ng-template matStepLabel>完成</ng-template> |
|
||||||
你已经完成了 |
|
||||||
<div> |
|
||||||
<button mat-button matStepperPrevious>上一步</button> |
|
||||||
<button mat-button (click)="stepper.reset()">重置</button> |
|
||||||
</div> |
|
||||||
</mat-step> |
|
||||||
</mat-horizontal-stepper> |
|
||||||
|
|
||||||
|
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { StepperComponent } from './stepper.component'; |
|
||||||
|
|
||||||
describe('StepperComponent', () => { |
|
||||||
let component: StepperComponent; |
|
||||||
let fixture: ComponentFixture<StepperComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ StepperComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(StepperComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,23 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; |
|
||||||
@Component({ |
|
||||||
selector: 'app-stepper', |
|
||||||
templateUrl: './stepper.component.html', |
|
||||||
styleUrls: ['./stepper.component.scss'] |
|
||||||
}) |
|
||||||
export class StepperComponent implements OnInit { |
|
||||||
isLinear = false; |
|
||||||
firstFormGroup: FormGroup; |
|
||||||
secondFormGroup: FormGroup; |
|
||||||
constructor(private _formBuilder: FormBuilder) { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
this.firstFormGroup = this._formBuilder.group({ |
|
||||||
firstCtrl: ['', Validators.required] |
|
||||||
}); |
|
||||||
this.secondFormGroup = this._formBuilder.group({ |
|
||||||
secondCtrl: ['', Validators.required] |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,22 +0,0 @@ |
|||||||
<mat-tab-group focusChange="xxx()"> |
|
||||||
<mat-tab label="选项一"> 我是内容一 </mat-tab> |
|
||||||
<mat-tab label="选项二"> 我是内容二 </mat-tab> |
|
||||||
<mat-tab label="选项三"> 我是内容三 </mat-tab> |
|
||||||
</mat-tab-group> |
|
||||||
|
|
||||||
|
|
||||||
<!-- 对于更复杂的标签标题,请在其中添加带有mat-tab-label指令的模板mat-tab。 --> |
|
||||||
<mat-tab-group> |
|
||||||
<mat-tab> |
|
||||||
<ng-template mat-tab-label> |
|
||||||
一 <strong>二</strong> 三 |
|
||||||
</ng-template> |
|
||||||
<h1>四五六</h1> |
|
||||||
</mat-tab> |
|
||||||
<mat-tab> |
|
||||||
<ng-template mat-tab-label> |
|
||||||
<mat-icon>thumb_down</mat-icon> 失败者 |
|
||||||
</ng-template> |
|
||||||
<h1>rush B!!!</h1> |
|
||||||
</mat-tab> |
|
||||||
</mat-tab-group> |
|
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { TabgroupComponent } from './tabgroup.component'; |
|
||||||
|
|
||||||
describe('TabgroupComponent', () => { |
|
||||||
let component: TabgroupComponent; |
|
||||||
let fixture: ComponentFixture<TabgroupComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ TabgroupComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(TabgroupComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
@ -1,17 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-tabgroup', |
|
||||||
templateUrl: './tabgroup.component.html', |
|
||||||
styleUrls: ['./tabgroup.component.scss'] |
|
||||||
}) |
|
||||||
export class TabgroupComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
xxx(){ |
|
||||||
} |
|
||||||
} |
|
Loading…
Reference in new issue