0

我正在 Ionic 中开发一个需要某些元素转换的应用程序。在这种情况下，特别是我有一个两列的页面布局，一列大小为 8，一列大小为 4。当单击列大小为 4 的“全部显示”按钮时，我必须显示有关其中内容的更多数据。

我的客户想要的是将 col 大小 4 列的宽度更改为大小 12，同时隐藏 col 大小 8 列。

所以基本上我的问题是如何将 col 大小 4 变为 12 并动画列增长？

我在下面的图片中绘制了我的页面布局。先感谢您！

初始布局

更改布局

这是一个简单的网格：

 <ion-grid>
  <ion-row>
     <ion-col size="8">
        
    </ion-col>
     <ion-col size="4">

     </ion-col>
 </ion-row>
</ion-grid>
4

1 回答 1

0

嘿 Nebojša Smrzlić 你应该试试这个。

在您的.ts文件中声明这些变量：

colum1=8
colum2=4
show_colum2:true

constructor(){}

show_expand(){
 this.show_colum2=!this.show_colum2
 if(!show_colum2){this.colum2=12}else{this.colum2=4}
 }

你的 html 会是这样的：

 <ion-grid>
 <ion-row>
   <ion-col [size]=colum1 *ngif=show_colum2>  
     </ion-col>
   <ion-col [size]=colum2>
      <ion-button (iclick)='show_expand()'> expand/show</ion-button>
    </ion-col>
   </ion-row>
</ion-grid>

我在要展开和折叠的列中设置了一个按钮，只是为了尝试单击事件并调用您的 ts 中的函数来尝试 de 方法。

如果你有什么好看的动画来显示 expand 我推荐这篇文章 CSS Expand / Contract Animation to Show/Hide Content

所以让我知道这是否有效

于 2020-10-06T18:44:10.580 回答