src/app/pages/users/profile/profile.component.ts
| selector | ngx-profile-component |
| styleUrls | profile.component.scss |
| templateUrl | ./profile.component.html |
import {Component} from '@angular/core';
@Component({
selector: 'ngx-profile-component',
styleUrls: ['./profile.component.scss'],
templateUrl: './profile.component.html',
})
export class ProfileComponent {
}
<nb-card>
<nb-card-header i18n="user profile">
پروفایل کاربری
</nb-card-header>
<nb-card-body>
<nb-tabset>
<nb-tab tabTitle="پروفایل">
<nb-card>
<nb-card-body>
<div class="row">
<div class="col-sm-3">
<img src="//placehold.it/150" class="ml-auto mr-auto img img-circle" alt="avatar">
<h6 class="mt-2">ارسال عکس جدید</h6>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control">انتخاب فایل</span>
</label>
</div>
<div class="col-sm-9">
<h4 class="mt-2 mb-4">پروفایل کاربری</h4>
<div class="row">
<div class="col-md-6">
<h6>نام</h6>
<p>
محمد
</p>
<h6>نام خانوادگی</h6>
<p>
حاجی آقازاده
</p>
<h6>ایمیل</h6>
<p>
Mohammad.hajiaghazadeh@gmail.com
</p>
<h6>نام کاربری</h6>
<p>
mohammad-haji
</p>
<h6>شماره تماس</h6>
<p>
0937 393 26 23
</p>
<h6>درباره من</h6>
<p>
برنامه نویس فول استک
</p>
<h6>علاقه مندی ها</h6>
<p>
طراحی و توسعه پلتفرم ها بر پایه اکوسیستم جاوااسکریپت
</p>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
</nb-tab>
<nb-tab tabTitle="پیام ها">
<nb-card>
<nb-card-body>
<p>لیست پیام ها</p>
</nb-card-body>
</nb-card>
</nb-tab>
<nb-tab tabTitle="ویرایش">
<nb-card>
<nb-card-body>
<div class="input-group">
<input type="text" placeholder="Project" class="form-control"/>
</div>
<div class="row full-name-inputs">
<div class="col-sm-6 input-group">
<input type="text" placeholder="Nick" class="form-control"/>
</div>
<div class="col-sm-6 input-group">
<input type="text" placeholder="Last Name" class="form-control"/>
</div>
</div>
<div class="input-group">
<input type="password" placeholder="Password" class="form-control"/>
</div>
<div class="input-group has-person-icon">
<input type="text" placeholder="With Icon" class="form-control"/>
</div>
</nb-card-body>
</nb-card>
</nb-tab>
</nb-tabset>
</nb-card-body>
</nb-card>