【问题标题】:How to create highlight around ion-avatar that indicates that it has been clicked?如何在 ion-avatar 周围创建高亮显示它已被点击?
【发布时间】:2021-01-20 17:22:39
【问题描述】:

我正在使用 Ionic5 Angular,当用户点击它时,我想在 ion-avatar 周围创建一个突出显示,如果用户再次点击它,它将消失。

用户可以点击每张图片(一次一张),图片周围会出现高亮显示。

HTML:

<ion-card class="scrolling-wrapper">
          <div class="item" *ngFor="let item of list">
              <ion-avatar>
              <img [src]= "source to image" >
            </ion-avatar>
          </div>
</ion-card>

SCSS:

.scrolling-wrapper {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  .item {
    display: inline-block;
    margin: 4px;
  }
}

【问题讨论】:

  • 需要更多细节 .. 至少分享您的 html 代码,您如何在本节中添加类以及如何单击此 .. 这样我们就可以在最后复制它 .. 建议您回答
  • 我添加了更多细节:)
  • 你的点击功能如何
  • 我已经在我的代码中实现了下面的答案。非常感谢您的帮助!

标签: ionic-framework


【解决方案1】:

你必须这样做:

  1. 声明一个空变量(例如:highlightedAvatar = "";)
  2. 从 .html 中获取被点击项目的 id
  3. 如果变量有值,则清空它,否则分配 id
  4. 创建要添加到 .css 的样式(例如亮度...)
  5. 加载带有条件的 css 类

您确实需要提供一些代码,以便您可以准确理解该过程

编辑:

HTML:

<ion-card class="scrolling-wrapper">
          <div class="item" *ngFor="let item of list">
              <ion-avatar [class.highlighted]="highlighted == item.id" (click)="selectAvatar(item.id)">
              <img [src]= "source to image" >
            </ion-avatar>
          </div>
</ion-card>

TS:

 export class AppComponent{
         highlighted = "";
    ...
    selectAvatar(id){
  if (this.highlighted === "") {
    this.highlighted = id;
  } else {
    this.highlighted = "";
  }
}

SCSS:

.highlighted{
filter: brightness(120%);
}

当然,您可以使用 css 来设计自己的突出显示方式

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-03-09
    • 1970-01-01
    • 1970-01-01
    • 2019-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-13
    相关资源
    最近更新 更多