ionic-framework
Ionische CSS-componenten

Opmerkingen

Basis syntaxis van het rastersysteem

Basisraster

In Ionic kunt u rijen declareren door de row klasse in te stellen op een element. Rijen zijn elementen die horizontaal zijn uitgelijnd en alles binnen dit element zal tot de rij behoren. Binnen de rij kunt u kolommen met verschillende breedte aangeven. U hebt de keuze uit de volgende verklaringen.

De maximale waardekolommen binnen een rij mogen 100 zijn. Hier zijn een paar voorbeelden van het basisraster.

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

Offset roosters

U kunt ook col-offset-<value> op de kolommen. In het onderstaande voorbeeld heeft een derde van een breedtekolom een derde van de breedte-offset, wat betekent dat het een derde breedte breed is en in de pagina wordt gecentreerd vanwege de offset.

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

Kolommen uitlijnen

Kolommen verticaal uitlijnen is mogelijk door de kolom col-<align_value> te stellen op een kolom zoals deze apart.

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

Het bovenstaande zal elke kolom afzonderlijk uitlijnen. Als u alle kolommen in de rij wilt uitlijnen, kunt u de uitlijningswaarde op de rij zelf instellen. In het onderstaande voorbeeld zullen alle kolommen in deze rij zich verticaal in het midden van de rij uitlijnen.

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

Responsief raster

Misschien wilt u de kolommen ook laten reageren omdat ze op een bepaalde viewport-breedte op elkaar worden gestapeld. Je hebt drie keuzes.

In dit voorbeeld zullen deze kolommen worden gestapeld onder de breedte van ongeveer een landschapstelefoon.

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

U kunt natuurlijk ook uw eigen mediaquery's maken als deze breekpunten niet geschikt zijn voor u en / of als u specifiekere breekpunten nodig hebt.

Basis syntaxis van lijstitems

Bijna elke toepassing heeft een soort lijst. Ionic heeft zijn eigen kant-en-klare CSS-declaraties voor lijstitems om het eenvoudig te maken om lijsten in uw applicatie te maken. Je kunt HTML-elementen gebruiken en een klasse declareren voor de of de richtlijn ion-list gebruiken om ze te maken. Een voorbeeld van een richtlijn staat onderaan.

Basislijstitem CSS-syntaxis:

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

Lijst met scheidingslijnen:

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

Lijstitems met pictogrammen:

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

U kunt ook pictogrammen instellen aan beide zijden van de items met de volgende syntaxis:

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

Een lijstitem met knop of knoppen kan als volgt worden gemaakt:

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

Het is ook mogelijk om lijstitems te maken met avatars, miniaturen en inzet die opvulling rond de lijstitems zullen creëren. Ionic zorgt ook voor het instellen van pictogrammen enz. In lijstitems door de opvulling dienovereenkomstig aan de lijstitems in te stellen.

Ionic heeft ook zijn eigen richtlijnen voor selectievakjes, keuzerondjes enz. Hier is een voorbeeld van een lijst met selectievakjes met Ionic.

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

Basisgebruik van gebruikskleuren

Preset Ionic CSS heeft een thema en vooraf ingestelde kleuren. U kunt de basiswaarden in ionic.css of in uw aangepaste CSS-bestand wijzigen of negeren. U kunt deze ook definiëren met SASS en om SASS in Ionic te gebruiken, hoeft u alleen maar de opdracht ionic setup sass in uw terminal uit te voeren.

Basisgebruik van kleuren in een knop. De klasse button-<phrase> maakt de knopachtergrond en grenst aan de kleur van het ingestelde thema.

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

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

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

Uw CSS-voorvoegselkeuzes zijn de volgende:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Deze klassen kunnen ook worden toegevoegd, bijvoorbeeld in badges enz. Hier is een voorbeeld van een badge:

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