ionic-framework
Ionische CSS-Komponenten

Bemerkungen

Grundlegende Gittersystem-Syntax

Grundraster

In Ionic können Sie Zeilen deklarieren, indem Sie die row auf ein Element setzen. Zeilen sind Elemente, die horizontal ausgerichtet sind, und alles, was sich in diesem Element befindet, wird zur Zeile gehören. Innerhalb der Zeile können Sie Spalten mit unterschiedlichen Breiten deklarieren. Sie haben die Wahl zwischen den folgenden Erklärungen.

Die Maximalwertspalten können innerhalb einer Zeile 100 haben. Hier einige Beispiele für das Grundraster.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Versatzgitter

Sie können auch col-offset-<value> für die Spalten col-offset-<value> . In dem folgenden Beispiel hat das Drittel einer Breitenspalte ein Drittel des Breitenversatzes, d. H. Es ist ein Drittel breit und wird aufgrund des Versatzes auf der Seite zentriert.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

Spalten ausrichten

Das vertikale Ausrichten von Spalten erfolgt möglicherweise, indem Sie den col-<align_value> separat auf eine Spalte setzen.

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Das obige wird jede Spalte für sich ausrichten. Wenn Sie alle Spalten in der Zeile ausrichten möchten, können Sie den Ausrichtungswert auf die Zeile selbst festlegen. Im folgenden Beispiel werden alle Spalten in dieser Zeile vertikal in der Mitte der Zeile ausgerichtet.

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Ansprechendes Raster

Möglicherweise möchten Sie auch, dass die Spalten ansprechbar sind, da sie bei einer bestimmten Breite des Ansichtsfensters übereinander liegen. Sie haben drei Möglichkeiten.

In diesem Beispiel stapeln sich diese Spalten in etwa der Breite eines Querformattelefons.

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Sie können natürlich auch Ihre eigenen Medienabfragen stellen, wenn diese Haltepunkte nicht für Sie geeignet sind und / oder Sie spezifischere Haltepunkte benötigen.

Grundlegende Listenelement-Syntax

Fast jede Anwendung hat eine Art Liste. Ionic verfügt über eigene eingebaute, sofort einsatzbereite Listenelement-CSS-Deklarationen, die das Erstellen von Listen in Ihrer Anwendung erleichtern. Sie können entweder HTML-Elemente verwenden und eine Klasse für die deklarieren oder die Direktion ion-list , um sie zu erstellen. Beispiel für eine Direktive ist unten.

CSS-Syntax für grundlegende Listenelemente:

<ul class="list">
  <li class="item"></li>
</ul>

Liste mit Trennwänden:

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

Listenelemente mit Symbolen:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

Sie können auch Symbole auf beiden Seiten der Elemente mit der folgenden Syntax festlegen:

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

Ein Listenelement mit Schaltflächen oder Schaltflächen kann folgendermaßen erstellt werden:

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

Es ist auch möglich, Listenelemente mit Avataren, Miniaturansichten und Einfügungen zu erstellen, die eine Auffüllung um die Listenelemente erzeugen. Ionic behandelt auch Einstellungssymbole usw. in Listenelementen, indem die Auffüllung entsprechend den Listenelementen eingestellt wird.

Ionic hat auch eigene Anweisungen für Checkboxen, Optionsfelder usw. Hier ist ein Beispiel einer Checkbox-Liste mit Ionic.

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>

Grundlegende Verwendung von Gebrauchsfarben

Preset Ionic CSS enthält ein Thema und voreingestellte Farben. Sie können die Basiswerte in ionic.css oder in Ihrer benutzerdefinierten CSS-Datei ändern oder überschreiben. Sie können diese auch mit SASS definieren. ionic setup sass SASS in Ionic verwenden zu können, müssen Sie lediglich den Befehl ionic setup sass in Ihrem Terminal ionic setup sass .

Grundlegende Verwendung von Farben in einer Schaltfläche. Die button-<phrase> -Klasse macht den Button-Hintergrund und grenzt an die Farbe des eingestellten button-<phrase> .

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

Ihre CSS-Präfix-Optionen lauten wie folgt:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Diese Klassen können beispielsweise auch in Badges usw. hinzugefügt werden. Hier ein Beispiel eines Badges:

<span class="badge badge-positive">Positive badge</span>