javascript - 如何在ionic 3中切换div

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

用户界面设计：

默认：



展开后：



先感谢您！

最佳答案

您可以使用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