src/app/pages/profile/profile.component.ts
| selector | app-profile |
| styleUrls | ./profile.component.scss |
| templateUrl | ./profile.component.html |
Methods |
constructor()
|
|
Defined in src/app/pages/profile/profile.component.ts:8
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div fxLayout="row">
<div class="profile m-r-20" fxFlex="340px">
<mat-card fxFlex>
<div mat-card-image class="profile-image"></div>
<div class="profile-image-avatar text-center">
<img class="avatar" src="https://lh5.googleusercontent.com/-hcRNe540rco/AAAAAAAAAAI/AAAAAAAAAAk/DfS45tpAR-A/photo.jpg">
</div>
<mat-card-content class="text-center">
<h4 class="mat-card-title">stbui</h4>
<h6 class="mat-card-subtitle">前端工程师</h6>
</mat-card-content>
<mat-card-actions>
<stbui-github-button type="link|star|fork"></stbui-github-button>
</mat-card-actions>
</mat-card>
</div>
<mat-card fxFlex>
<mat-card-title>我的信息</mat-card-title>
<mat-card-content>
<form fxLayout="column" #formContact="ngForm">
<mat-form-field class="display-block">
<input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="您的邮箱" name="email" ngModel required>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="您的手机" name="phone" ngModel required>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请您的网址" name="website ngModel" required>
</mat-form-field>
<mat-form-field class="display-block">
<textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">更新资料</button>
</form>
</mat-card-content>
</mat-card>
</div>
./profile.component.scss
:host {
display: block;
margin: 24px;
}
.display-block {
display: block;
}
.profile-image {
background: linear-gradient(90deg, #00d9bf, #00d977);
height: 180px;
}
.profile-image-avatar {
margin-top: -80px;
margin-bottom: 20px;
> .avatar {
border-radius: 100%;
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
}