如何创建带有用户首字母的圆形彩色头像？

Question

我正在使用Ionic角应用程序开发。用用户的首字母创建圆形彩色头像的最佳方法是什么，例如联系人列表。就像这样：

​

​

提前感谢！干杯

Answer 1

在.ts文件中创建一个函数：

 getInitials(firstName:string, lastName:string) {
    return firstName[0].toUpperCase() + lastName[0].toUpperCase();
  }

在getInitials文件中调用.html函数：

<div class="container">
  <div class="avatar"> {{getInitials('john','doe')}}</div>
  <br>
  <div class="avatar"> {{getInitials('john','doe')}}</div>
  <br>
  <div class="avatar"> {{getInitials('john','doe')}}</div>
  <br>
  <div class="avatar"> {{getInitials('john','doe')}}</div>
  <br>
  <div class="avatar"> {{getInitials('john','doe')}}</div>  
</div>

并将此片段添加到您的.scss文件中：

$colors: #a2b9bc,#6b5b95,#feb236, #d64161, #ff7b25, #b2ad7f,  #878f99;

.avatar {
    color: #fff; 
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    width:50px;
    height: 50px;
    font-weight: 600;
  }

  @for $i from 1 through length($colors) {
    .avatar:nth-child(#{length($colors)}n+#{$i}) {
        background: lighten(nth($colors, $i), 20%);
    }
}

结果如下：

​

​

Answer 2

只有css，例如。

.avatar{
  width:3rem;        //<--use the size you choose
  border-radius:100%;
  text-align: center;
  background-color: pink;
}
.avatar span{
  line-height: 3rem; //<--see that it's the same size than the width
  color:red;
}

<div class="avatar">
  <span>AB</span>
</div>

您还可以定义一个“化身”数组。

  avatars=[{label:"AB",background:"LightGreen",color:"forestgreen"},
           {label:"WD",background:"lightsteelblue",color:"steelblue"}]

写

<div *ngFor="let avatar of avatars" class="avatar" 
        [style.background-color]="avatar.background">
  <span [style.color]="avatar.color">{{avatar.label}}</span>
</div>

见简单堆栈闪电战