動態列數Ionic 2

Question

我正在構建一個使用Ionic 2的移動應用程序，並且我的其中一個要求是如果顯示在平板電腦上顯示4張卡片，並且顯示在移動設備中只顯示2張卡片。我想知道什麼纔是實現這個目標的最好方法？

Answer 1

你可以基本上給他們一個最小寬度的寬度，讓他們重新定位自己。像

.card { 
    width: calc(100%/4); 
    min-width: calc(356px/2); // most minimum width of your container on a phone. 
} 

或許你最好的選擇，但是會去響應路線。只需使用@media屏幕和（max-width =「768px」）或任何您需要的設置並更改其中的值即可。

.card { 
    width: calc(100%/4); 
} 
@media screen and (max-width:768px){ 
    .card { 
     width: calc(100%/2);   
    } 
} 

如果您希望通過角度應用它，您可以使用* ngStyle來實現。只需創建一個字符串來匹配值並運行* ngIf語句來應用單獨的值。

Answer 2

我還沒有試過，但你可能想使用離子平臺的地方，你可以嘗試類似的<ion-col>元素上，你可以爲iPhone和[attr.width-25]爲iPad添加[attr.width-50]。

<ion-col [attr.width-50]="isIphoneOrIpad" [attr.width-25]="!isIphoneOrIpad"> 

然後，您可以編寫返回布爾邏輯在相應.ts文件中使用平臺。

import { Platform } from 'ionic-angular'; 

@Component({...}) 
export MyPage { 
    isIphoneOrIpad:boolean; 

    constructor(public platform: Platform) { 
    this.isIphoneOrIpad = this.platform.is('iphone') || this.platform.is('ipad'); 
    } 
} 

這將返回true或false，然後相應地顯示屬性。

欲瞭解更多信息，請查看Ionic 2 Platform Documentation