2017-01-23 2 views
0

Ich baue eine mobile App mit Ionic 2 und eine der Anforderungen besteht darin, 4 Karten in einer Reihe anzuzeigen, wenn sie in einem Tablet angezeigt werden und nur 2 Karten in einer Reihe, wenn sie in einem Handy angezeigt werden. Ich habe mich gefragt, was wäre der beste Weg, dies zu erreichen?Dynamische Anzahl der Spalten Ionic 2

+0

Können Sie einige Ihrer Code teilen? Was hast du probiert? –

Antwort

0

Sie könnten ihnen im Wesentlichen nur eine Breite mit einer minimalen Breite geben und sie sich neu positionieren lassen. So etwas wie

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

Wahrscheinlich Ihre beste Wette wäre aber, die reaktionsschnelle Route zu gehen. Verwenden Sie einfach einen @ media-Bildschirm und (max-width = "768px") oder was immer Sie brauchen, um es zu setzen und ändern Sie die Werte dort.

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

und Sie könnten dies mit einem * ngStyle tun, wenn Sie es über angular anwenden möchten. Erstellen Sie einfach eine Zeichenfolge, die mit dem Wert übereinstimmt, und führen Sie eine * ngIf-Anweisung aus, um die separaten Werte anzuwenden.

0

Ich habe dies nicht versucht, aber wahrscheinlich möchten Sie ionische Plattform irgendwo verwenden Sie etwas wie auf dem <ion-col> Element versuchen können Sie [attr.width-50] für das iPhone und [attr.width-25] für das ipad hinzufügen.

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

Anschließend können Sie die Logik für die Rückkehr boolean in der entsprechenden .ts Datei mit Platform schreiben.

import { Platform } from 'ionic-angular'; 

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

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

Welche wird True oder False zurückgeben und dann das Attribut entsprechend anzeigen.

Weitere Informationen finden Sie auf der Ionic 2 Platform Documentation

Verwandte Themen