如何在ionic3中切换div

Question

我想显示一个长文本。但为了获得更好的用户体验，长文本将部分显示为“展开”按钮。当用户单击“展开”按钮时，全文将被展开。

用户界面设计：

默认值：

展开后：

提前谢谢！

Answer 1

只需使用(click)="callback()"将click事件添加到按钮上 单击后，在callback方法内部，在true / false之间切换类属性。

public expanded = false;

callback() {
  this.expanded = !this.expanded;
}

在要切换的div上，切换一个类：

<div [ngClass]="{'expanded': expanded}"></div>

当类属性“ expanded”为true时，这将添加类“ expanded”。 然后添加适当的CSS样式，以根据您的外观更改高度。

因此，现在单击该按钮将在class属性之间切换在true和false之间扩展，这又将在div上切换css类。

Answer 2

您可以使用ngClass来切换类似unexpand的类，并且该类设置div的高度

样式

.unexpand {
  height:100px; 
  overflow: hidden;
 }

模板

<div [ngClass]="{unexpand:isUnexpand}" >
 ...
</div>

<button (click)="isUnexpand = !isUnexpand">
  {{isUnexpand ? 'Expand' :'Unexpand'}}
 </button>

功能

  isUnexpand:boolean=false

stackblitz demo