如何在ionic3中切换div

Question

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

用户界面设计：

默认：

展开后：

先感谢您！

Answer 1

只需在按钮上添加一个点击事件，使用(click)="callback()"当它被点击时，在callback方法中，在真/假之间切换类属性。

public expanded = false;

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

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

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

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

因此，单击按钮现在将在 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