Ionischen 2 - Tabellen

Können Sie machen Sie Ihre ionGrid sehen aus, wie in diesem link mit ein paar Stil-Regeln. Genau wie Sie sagen, docs sagen nichts über die Header, aber Sie können die <strong></strong> html-element gibt es:

  <!-- Header -->
  <ion-row>
    <ion-col>
      <strong>Product</strong>
    </ion-col>
    <ion-col>
      <strong>Payment Date</strong>
    </ion-col>
    <ion-col>
      <strong>Status</strong>
    </ion-col>
  </ion-row>

Und ich denke, es gibt nicht eine nativen Weg, um Tabellenzeilen farbig wie Bootstrap "Kontext-Tabelle-Layout", aber man kann erreichen, dass Sie mit nur ein paar Stil-Regeln:

ion-row.active {
  background-color: #f5f5f5;
}

ion-row.success {
  background-color: #dff0d8;
}

ion-row.warning {
  background-color: #fcf8e3;
}

ion-row.error {
  background-color: #f2dede;
}

Und über die Responsive Tabellen-Layout, obwohl wir erreichen konnten, dass durch das spielen mit dem überlauf CSS-Eigenschaft, ich glaube nicht, dass das eine gute Idee ist, da es möglicherweise Auswirkungen auf andere Dinge, wie z.B. die sliding-Effekt öffnen Sie die Seite im Menü, oder Dinge wie, dass. Wenn die Breite der Tabelle ist zu groß, um den Bildschirm passen, anstatt es scrollbaren eine bessere Lösung wäre, nur um zu zeigen, eine Spalte oder zwei mit den wichtigsten Daten und eine Schaltfläche, gelangen Sie zu einer Detail-Seite, wo Sie sehen können, den rest der Informationen.

UPDATE

Als der Ionische 3.0.0, die Grid-Komponente wurde aktualisiert und viele neue features enthalten waren. Sie können werfen Sie einen Blick auf diese arbeiten plunker, um zu sehen, einige der neuen features der neuen grid-Komponente.

InformationsquelleAutor sebaferreras