ionic-framework
Ионные компоненты CSS

замечания

Синтаксис базовой сетки

Базовая сетка

В Ionic вы можете объявлять строки, задавая класс row для элемента. Строки будут элементами, которые выровнены по горизонтали, и все внутри этого элемента все будет принадлежать строке. Внутри строки вы можете объявлять разные столбцы ширины. У вас есть выбор из следующих деклараций.

Столбцы максимального значения могут иметь внутри строки 100. Вот несколько примеров базовой сетки.

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

Смещение сетки

Вы также можете установить col-offset-<value> в столбцы. В приведенном ниже примере одна треть столбца ширины имеет одну треть смещения ширины, что означает, что ширина будет шириной в одну треть и центрирована на странице из-за ее смещения.

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

Выровнять столбцы

Выравнивание столбцов по вертикали возможно, установив col-<align_value> в столбец отдельно, как это.

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

Вышеупомянутый будет выравнивать каждый столбец на своем собственном. Если вы хотите выровнять все столбцы внутри строки, вы можете установить значение выравнивания для самой строки. В приведенном ниже примере все столбцы внутри этой строки будут выравниваться по вертикали в центре строки.

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

Реагирующая сетка

Вы также можете захотеть, чтобы колонки реагировали, поскольку они будут складываться друг на друга при некоторой ширине видового экрана. У вас есть три варианта.

В этом примере эти столбцы будут располагаться под шириной примерно ландшафтного телефона.

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

Разумеется, вы также можете создавать свои собственные медиа-запросы, если эти точки останова не подходят для вас и / или вам нужны более конкретные контрольные точки.

Синтаксис элемента синтаксиса

Почти у каждого приложения есть какой-то список. У Ionic есть собственный встроенный готовый к использованию элемент списка объявлений CSS, чтобы упростить составление списков внутри вашего приложения. Вы можете использовать HTML-элементы и объявить класс для или использовать директивный ion-list для их создания. Пример директивы находится внизу.

Основной элемент списка Синтаксис CSS:

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

Список с разделителями:

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

Список элементов с иконками:

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

Вы также можете установить значки с обеих сторон элементов со следующим синтаксисом:

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

Элемент списка с кнопкой или кнопками можно создать следующим образом:

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

Также можно создавать элементы списка с аватарами, эскизами и вставками, которые будут создавать прописку вокруг элементов списка. Ionic также обрабатывает установочные значки и т. Д. В элементах списка, устанавливая дополнение к элементам списка.

Ionic также имеет свои собственные директивы для флажков, переключателей и т. Д. Вот пример списка флажков с Ionic.

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

Основное использование цветов утилиты

Предустановленный Ionic CSS будет иметь тему и предустановленные цвета для него. Вы можете изменить или переопределить основные значения в файле ionic.css или в вашем пользовательском файле CSS. Вы также можете определить их с помощью SASS и использовать SASS в Ionic, вам просто нужно запустить команду ionic setup sass в вашем терминале.

Основное использование цветов в кнопке. Класс 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>

Ваши варианты префикса CSS следующие:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Эти классы могут быть добавлены также, например, в значки и т. Д. Вот пример значка:

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