ionic-framework
Ionic CSS-komponenter

Anmärkningar

Grundläggande syntax för rutnät

Grundläggande rutnät

I Ionic kan du förklara rader genom att ställa row till ett element. Rader kommer att vara element som är horisontellt inriktade och allt inne i detta element kommer allt att tillhöra raden. Inuti raden kan du deklarera olika breddskolumner. Du kan välja följande deklarationer.

Det högsta värdet på kolumnerna kan ha en rad är 100. Här är några exempel på grundläggande rutnät.

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

Offsetgaller

Du kan också ställa col-offset-<value> till kolumnerna. I exemplet nedan har en tredjedel av en breddskolonn en tredjedel av breddförskjutningen, vilket innebär att den kommer att vara en tredjedel bredd bred och vara centrerad på sidan på grund av att den är förskjuten.

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

Justera kolumner

Att justera kolumner vertikalt är möjligen genom att ställa col-<align_value> till en kolumn separat som denna.

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

Ovanstående kommer att anpassa varje kolumn på egen hand. Om du vill anpassa alla kolumner i raden kan du ställa in justeringsvärdet till själva raden. I exemplet nedan kommer alla kolumner inuti denna rad att anpassa sig vertikalt i mitten av raden.

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

Responsivt rutnät

Du kanske också vill ha kolumnerna lyhörda eftersom de staplas ovanpå varandra i viss visningsbredd. Du har tre val.

I det här exemplet staplas dessa kolumner under bredden på ungefär en liggande telefon.

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

Du kan naturligtvis också göra dina egna mediafrågor om dessa brytpunkter inte är lämpliga för dig och / eller om du behöver mer specifika brytpunkter.

Grundläggande listobjektsyntax

Nästan varje applikation har någon slags lista. Ionic har sina egna inbyggda redo att gå-lista CSS-deklarationer för att göra det enkelt att göra listor i din applikation. Du kan antingen använda HTML-element och förklara en klass för eller använda direktivet ion-list att göra dem. Exempel på ett direktiv finns längst ner.

Grundläggande listobjekt CSS-syntax:

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

Lista med avdelare:

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

Lista objekt med ikoner:

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

Du kan också ställa ikoner på båda sidor av artiklarna med följande syntax:

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

Ett listobjekt med knapp eller knappar kan skapas så här:

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

Det är också möjligt att skapa listobjekt med avatarer, miniatyrbilder och inlägg som skapar stoppning runt listobjekten. Ionic hanterar också inställningsikoner etc i listobjekt genom att ställa in utfyllnad i enlighet med listobjekten.

Ionic har också sina egna direktiv för kryssrutor, radioknappar etc. Här är ett exempel på en kryssruta med Ionic.

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

Grundläggande användning av verktygsfärger

Förinställd Ionic CSS kommer att ha ett tema och förinställda färger för det. Du kan ändra eller åsidosätta de grundläggande värdena i ionic.css eller i din anpassade CSS-fil. Du kan också definiera dessa med SASS och för att använda SASS i Ionic behöver du bara köra det ionic setup sass kommandot i din terminal.

Grundläggande användning av färger i en knapp. button-<phrase> gör knappbakgrunden och gränsar till färgen på det inställda temat.

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

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

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

Dina CSS-prefixval är följande:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Dessa klasser kan läggas till till exempel i märken etc. Här är ett exempel på ett märke:

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