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
Antwort
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.
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
- 1. MySQL Pivotzeile in dynamische Anzahl der Spalten
- 2. DefaultTableModel, Zeile hinzufügen, dynamische Anzahl der Spalten
- 3. Liste Artikel Anzahl ionic 2
- 4. Angular2/Ionic 2 dynamische Komponente Eigenschaft
- 5. Primefaces Datagrid dynamische Anzahl der Spalten auf der Anzeigebreite abhängig
- 6. Dynamische Einstellung der Optionen für ein ActionSheet in Ionic 2
- 7. Ionic 2 Bilder Popup (eckig 2 dynamische Bindung)
- 8. Dynamische Anzahl der Spalten in ActiveAdmin CSV exportieren
- 9. Gestapelte Grid Layout Manager dynamische Anzahl der Spalten
- 10. HTML dynamische Anzahl der Checkboxen
- 11. SQL-Anzahl 2 gleiche Spalten und wählen Sie andere Spalten
- 12. Dynamic ionic 2 Registerkarten
- 13. ionic 2 Übersetzen Service
- 14. So berechnen Sie die Anzahl der Datensätze von 2 Spalten
- 15. Transponieren Sie Zeilen zu Spalten für Uknown Anzahl der Spalten
- 16. SQL Fund Anzahl der Spalten
- 17. Dynamische Spalten
- 18. Ionic 2 populate dynamische Optionen mit einer über ngModel
- 19. Dynamische Bildpfad in Ionic 2 funktioniert nicht auf dem Gerät
- 20. Dynamische Importe für Ionic 2 außerhalb von „node_modules“
- 21. SQL Zeilen 2 Spalten
- 22. Anzahl der Spalten mit Filtern
- 23. Angular.js: Dynamische Länge der Spalten in Tabelle
- 24. Angular 2, Ionic 2
- 25. SSRS Dynamische Spalten anzeigen
- 26. Shift Pandas Spalten basierend auf der Anzahl der leeren Spalten
- 27. Dynamische Anzahl von Spalten in SQL-Abfrage in PL/SQL
- 28. Python-Add dynamische Anzahl von Spalten zu SQLite-Datenbank
- 29. Dynamische Spalten Standardfilter TableSorter
- 30. Ionic Wählen Sie Dynamische Optionen
Können Sie einige Ihrer Code teilen? Was hast du probiert? –