ionic-framework
Komponenty jonowe CSS

Uwagi

Podstawowa składnia systemu grid

Podstawowa siatka

W Ionic można deklarować wiersze, ustawiając klasę row na element. Rzędy będą elementami, które są wyrównane w poziomie i cokolwiek w tym elemencie wszystko będzie należeć do rzędu. Wewnątrz wiersza możesz zadeklarować kolumny o różnych szerokościach. Masz do wyboru następujące deklaracje.

Maksymalne wartości kolumn, które mogą mieć wewnątrz wiersza, to 100. Oto kilka przykładów podstawowej siatki.

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

Siatki offsetowe

Możesz także ustawić kolumny col-offset-<value> do kolumn. W poniższym przykładzie jedna trzecia kolumny szerokości ma jedną trzecią przesunięcia szerokości, co oznacza, że będzie miała szerokość jednej trzeciej szerokości i zostanie wyśrodkowana na stronie z powodu przesunięcia.

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

Wyrównaj kolumny

Wyrównanie kolumn w pionie jest możliwe poprzez ustawienie col-<align_value> na kolumnę osobno w ten sposób.

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

Powyższe wyrówna każdą kolumnę samodzielnie. Jeśli chcesz wyrównać wszystkie kolumny w wierszu, możesz ustawić wartość wyrównania do samego wiersza. W poniższym przykładzie wszystkie kolumny w tym rzędzie ustawią się pionowo w środku wiersza.

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

Elastyczna siatka

Możesz także chcieć, aby kolumny były responsywne, ponieważ będą się układać jeden na drugim w pewnej szerokości rzutni. Masz trzy możliwości.

W tym przykładzie kolumny te zostaną ułożone w stos pod szerokością w przybliżeniu telefonu poziomego.

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

Możesz również tworzyć własne zapytania dotyczące mediów, jeśli te punkty przerwania nie są odpowiednie dla Ciebie i / lub potrzebujesz bardziej szczegółowych punktów przerwania.

Podstawowa składnia pozycji listy

Prawie każda aplikacja ma jakąś listę. Ionic ma własną wbudowaną, gotową do użycia deklarację CSS elementu listy, aby ułatwić tworzenie list w aplikacji. Możesz użyć elementów HTML i zadeklarować klasę lub użyć dyrektywy ion-list aby je utworzyć. Przykład dyrektywy znajduje się na dole.

Podstawowa pozycja listy Składnia CSS:

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

Lista z dzielnikami:

<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 elementów z ikonami:

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

Możesz także ustawić ikony po obu stronach elementów o następującej składni:

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

Element listy z przyciskiem lub przyciskami można utworzyć w następujący sposób:

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

Możliwe jest również tworzenie elementów listy z awatarami, miniaturami i wstawkami, które utworzą wypełnienie wokół elementów listy. Ionic obsługuje również ikony ustawień itp. W elementach listy, ustawiając dopełnianie odpowiednio do elementów listy.

Ionic ma również własne dyrektywy dotyczące pól wyboru, przycisków opcji itp. Oto przykład listy pól wyboru z Ionic.

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

Podstawowe użycie kolorów użytkowych

Preset Ionic CSS będzie miał motyw i wstępnie ustawione kolory. Możesz modyfikować lub zastępować podstawowe wartości w pliku ionic.css lub w niestandardowym pliku CSS. Możesz także zdefiniować je za pomocą SASS i aby użyć SASS w Ionic, wystarczy uruchomić polecenie ionic setup sass w terminalu.

Podstawowe użycie kolorów w przycisku. Klasa button-<phrase> zmieni tło przycisku i obramuje kolor ustawionego motywu.

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

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

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

Dostępne są następujące opcje prefiksu CSS:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Klasy te można dodawać również na przykład do odznak itp. Oto przykład odznaki:

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