ionic-framework
Componenti CSS ionici

Osservazioni

Sintassi del sistema di griglia di base

Griglia di base

In Ionic è possibile dichiarare le righe impostando la classe di row su un elemento. Le righe saranno elementi allineati orizzontalmente e qualsiasi cosa all'interno di questo elemento apparterrà alla riga. All'interno della riga è possibile dichiarare colonne di larghezza diverse. Avete una scelta delle seguenti dichiarazioni.

Le colonne del valore massimo possono avere all'interno di una riga 100. Ecco alcuni esempi della griglia di base.

<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>

Griglie sfalsate

Puoi anche impostare col-offset-<value> sulle colonne. Nell'esempio seguente la colonna di un terzo di una larghezza ha un terzo dell'offset di larghezza, il che significa che sarà largo un terzo della larghezza e centrato nella pagina a causa del suo offset.

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

Allinea le colonne

Allineare le colonne verticalmente è possibilmente impostando il col-<align_value> su una colonna separatamente come questo.

<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>

Quanto sopra allinea tutte le colonne su se stesse. Se si desidera allineare tutte le colonne all'interno della riga, è possibile impostare il valore di allineamento sulla riga stessa. Nell'esempio seguente tutte le colonne all'interno di questa riga si allineeranno verticalmente nel centro della riga.

<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>

Griglia reattiva

Potresti anche volere che le colonne siano reattive e che si impilino l'una sull'altra ad una certa larghezza di vista. Hai tre scelte.

In questo esempio, queste colonne si impilano sotto la larghezza di circa un telefono orizzontale.

<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>

Puoi anche formulare le tue domande sui media se questi punti di interruzione non sono adatti a te e / o se hai bisogno di punti di interruzione più specifici.

Sintassi delle voci di base dell'elenco

Quasi ogni applicazione ha una sorta di elenco. Ionic ha le proprie dichiarazioni CSS predefinite per l'elenco delle voci predefinite per semplificare la creazione di elenchi all'interno dell'applicazione. Puoi usare gli elementi HTML e dichiarare una classe per o usare la direttiva ion-list per renderli. L'esempio di una direttiva è in fondo.

Sintassi CSS dell'elenco di base:

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

Elenco con divisori:

<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>

Elenca elementi con icone:

<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>

Puoi anche impostare le icone su entrambi i lati degli elementi con la seguente sintassi:

<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>

Una voce di elenco con pulsante o pulsanti può essere creata in questo modo:

<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>

È anche possibile creare voci di elenco con avatar, miniature e inserti che creeranno il riempimento attorno agli elementi dell'elenco. Ionic gestisce anche le icone di impostazione in voci di elenco impostando il padding in base agli elementi dell'elenco.

Anche Ionic ha le sue direttive per le caselle di controllo, i pulsanti di opzione ecc. Ecco un esempio di un elenco di caselle di controllo con Ionic.

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

Utilizzo di base dei colori di utilità

Preset Ionic CSS avrà un tema e i colori preimpostati. È possibile modificare o sovrascrivere i valori di base in ionic.css o nel proprio file CSS personalizzato. Puoi anche definirli con SASS e usare SASS in Ionic hai solo bisogno di eseguire il comando ionic setup sass nel tuo terminale.

Uso di base dei colori in un pulsante. La classe button-<phrase> renderà il pulsante background e confina con il colore del tema impostato.

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

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

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

Le tue scelte di prefisso CSS sono le seguenti:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Queste classi possono essere aggiunte anche per esempio in badge ecc. Ecco un esempio di badge:

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