Заголовок (Header)

Заголовок – это фиксированная область в верхней части экрана, которая может содержать текст, логотип, а также кнопки, располагающиеся слева или справа. Кнопки используются для навигации или выполнения других действий.

Цвета шапки по умолчанию:

bar-light
<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>
bar-stable
<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>
bar-positive
<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>
bar-calm
<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>
bar-balanced
<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>
bar-energized
<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>
bar-assertive
<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>
bar-royal
<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>
bar-dark
<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>
Header
Читать далее

Подзаголовок

Сразу под основным заголовком Вы можете разместить дополнительный. Существуют разные способы настройки хедера, некоторые варианты описаны в разделе "Панель с кнопками". 

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Не забудьте включить CSS класс has-subheader в директиву ion-content.

Header
Sub Header
Читать далее

Контент

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

*О дополнительных настройках отображения контента читайте в разделе "Контент"

Content

I'm an H1!

I'm an H2!

I'm an H3!

I'm an H4!

I'm an H5!
I'm an H6!

I'm a paragraph with a link!

Читать далее

Футер (Footer)

Футер – это фиксированная область в нижней части экрана, которая содержит различную информацию.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Настройки цветовой схемы подвала идентичны таким же настройкам для шапки, просто используйте bar-footer вместо bar-header. Если в подвале присутствует заголовок, любые кнопки будут автоматически размещены с правильной стороны относительно заголовка, в соответствии с Вашей разметкой. Например:   

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

Если в подвале не используется заголовок, но требуется поместить кнопку справа, Вам следует включить тэг pull-right для кнопки, которую Вы хотите разместить справа. Например:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>
Header
Читать далее

Кнопки

Кнопки – это неотъемлемая часть работы с любым мобильным приложением. Для кнопок в Ionic существует полный набор цветов по умолчанию.

По умолчанию к кнопке применено display: inline-block. Другой вариант – это кнопки на всю ширину экрана.

<button class="button">
  Default
</button>

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

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

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

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

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

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

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

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

<button class="button button-dark">
  button-dark
</button>
Buttons

Читать далее

Block Buttons

Добавление button-block к кнопке означает применение display: block. Такая кнопка займет 100% ширины родительского элемента. В приведенном примере к кнопке, содержащей контент, применяется padding, поэтому между кнопкой и краями экрана есть отступ.

<button class="button button-block button-positive">
  Block Button
</button>
Block Buttons
Читать далее

Кнопки на всю ширину экрана

Добавление button-full к кнопке означает не только применение display: block, но и удаление границы кнопки слева и справа, а также возможность задания любого радиуса границы. Этот стиль применяется в случаях, когда нужно создать кнопку во всю ширину дисплея устройства. Родительский элемент кнопки не имеет padding, установленного по умолчанию.

<button class="button button-full button-positive">
  Full Width Block Button
</button>
Full Width Block Buttons
Читать далее

Размер кнопок

Добавление в код кнопки button-large делает кнопку больше, добавление button-small – меньше.

<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>
Small and Large Buttons

Читать далее

Кнопки с контуром

Используйте button-outline, чтобы создать кнопку с контуром и прозрачным фоном.

Примечание: текст и контур примут цвет в соответствии со стилем кнопки. То есть при использовании button-positive Вы получите кнопку с прозрачным фоном, текстом и контуром голубого цвета.

<button class="button button-outline button-positive">
  Outlined Button
</button>
Outlined Buttons

Читать далее

Прозрачные кнопки

Используйте button-clear для удаления контура кнопки, чтобы сделать текст более выделяющимся.

Примечание: цвет текста станет соответствовать примененному стилю кнопки. То есть при использовании button-positive Вы получите кнопку без контура с текстом голубого цвета.

<button class="button button-clear button-positive">
  Clear Button
</button>
Clear Buttons

Читать далее

Кнопки с иконкой

Вы можете легко добавить иконку на любую кнопку с помощью встроенного функционала Ionicons или нужного пакета шрифтов. 

Иконка может быть установлена с дочерним элементом внутри кнопки, однако, назначение иконки для кнопки напрямую уменьшает количество элементов в объектной модели документа (DOM).

<button class="button">
  <i class="icon ion-loading-c"></i> Loading...
</button>

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
Icon Buttons

Learn More

Back

 

 

Reorder

Читать далее

Кнопки в шапке

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

<div class="bar bar-header">
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</div>
Header Buttons
Читать далее

Прозрачные кнопки в шапке

Чтобы кнопки в шапке выглядели минималистично, используйте класс button-clear для удаления фона и контура кнопки.

<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>
Header Buttons
Читать далее

Панель с кнопками

Кнопки легко можно сгруппировать с помощью класса button-bar . В примере ниже, панель с кнопками была добавлена в хедер, а также в основную часть экрана, где располагается контент.

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>
Читать далее

Список

Компонент Список - это простой и общепринятый способ отображать списки. Это один из наиболее часто используемых интерфейсов среди популярных операционных систем. Список может включать в себя различную информацию от обычного текста до кнопок, переключателей и миниатюр объектов.

Список - это достаточно гибкий и мощный компонент, который поддерживает различные действия с данными: редактирование; потяните для редактирования; перетащите для изменения порядка; потяните, чтобы обновить.

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>
List Items
  • Battletoads
  • Contra
  • Duck Tales
  • Mega Man
  • Metroid
  • Mike Tyson's Punch-Out
  • R.C. Pro-Am
  • Spy Hunter
  • Super Mario Bros.
  • The Legend of Zelda
Читать далее

Разделители в списке

List items can also be dividers to organize and group the list items. Use the item-dividerclass to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>
Читать далее

Иконки в списке

В списках могут использоваться иконки, которые выравниваются слева и/или справа относительно каждого элемента списка. Тип выравнивания следует указывать для каждого item отдельно. Вы можете добавить иконку на любую строку списка с помощью встроенного функционала Ionicons или нужного пакета шрифтов. 

Используйте item-icon-left и item-icon-right для выравнивания иконки по левому или правому краю соответственно. В случае, если в одной строке списка нужно разместить две иконки с разных сторон, используйте оба класса: item-icon-left и item-icon-right.

Пример ниже использует элемент <a> для каждой строки списка, что делает каждую из них полностью кликабельной. Если используется элемент <a>  или <button>, и при этом справа не вставлена иконка, то небольшая стрелка, указывающая направо, будет добавлена автоматически.

В приведенном примере для первой строки произведено выравнивание иконки по левому краю. Для второй – выравнивание по обеим сторонам. Для третьей – иконка слева и item-note. Для четвертой – добавлен элемент badge

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>
Читать далее

Кнопки в списке

Используйте item-button-right или item-button-left для добавления кнопки в строку списка.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>
List Buttons
Call Ma
Читать далее

Аватар объекта

Аватары используются для вставки изображения крупнее иконки, но меньше миниатюры. Используйте класс item-avatar для создания аватара.

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>
Item Avatars

Venkman

Back off, man. I'm a scientist.

Egon

We're gonna go full stream.

Ray

Ugly little spud, isn't he?

Winston

That's a big Twinkie.

Tully

Okay, who brought the dog?

Dana

I am The Gatekeeper!

Slimer

Boo!

Читать далее

Миниатюра объекта

Миниатюры по размеру больше иконок и представляют собой уменьшенные копии оригинальных изображений. Миниатюра задает высоту списка. Используйте item-thumbnail-left и item-thumbnail-right, чтобы выровнять миниатюры по вертикали слева и справа, соответственно.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

Quick ng-repeat demo

Item Thumbnails

Weezer

Blue Album

Smashing Pumpkins

Siamese Dream

Nirvana

Nevermind

Beastie Boys

License To Ill

Green Day

Dookie

Читать далее

Вложенные списки

Список может не только растягивается на всю ширину экрана, но и ограничиваться рамками. Разница заключается в том, что элемент list list-inset задает границы. Вложенный список схож c карточками за тем исключением, что карточки отображаются с тенью. Поскольку list list-inset не обладает тенью, прокручивание таких списков становится более плавным. 

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>
Inset Lists
Raiders of the Lost Ark
Temple of Doom
Last Crusade
Kingdom of the Crystal Skull
Читать далее

Карточки

Карточки набирают все большую популярность и стали чаще применяться в последние годы. Это превосходный способ представления и организации информации, который понятен пользователям. Стиль карточек быстро стал оптимальным выбором многих компаний, включая Google, Twitter и Spotify, благодаря возможности уместить так много информации на, зачастую, небольшом экране.

С помощью Карточек визуальное представление информации на мобильных устройствах с экранами разных размеров становится очень простым. Карточками удобно управлять, их даже можно анимировать, это гибкий инструмент. Чаще карточки размещаются друг на друге, но есть и "страничный" вариант с перемещением между карточками с помощью свайпа влево и вправо.

<div class="card">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>

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

Cards
This is a basic Card which contains an item that has wrapping text.
Читать далее

Шапка и подвал для карточки

Настройка и заполнение карточки похожи на полноценную работу с экраном, то есть для карточки можно задать хедер и футер. Добавьте класс item-divider над или под контентом card.

<div class="card">
  <div class="item item-divider">
    I'm a Header in a Card!
  </div>
  <div class="item item-text-wrap">
    This is a basic Card with some text.
  </div>
  <div class="item item-divider">
    I'm a Footer in a Card!
  </div>
</div>
Cards
I'm a Header in a Card!
This is a basic Card with some text.
I'm a Footer in a Card!
Читать далее

Список из карточек

Используйте класс list card, чтобы создать карточку со списком. 

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>
Читать далее

Изображение в карточке

Изображения прекрасно смотрятся в карточках и могут быть использованы вместе со списками и прочими элементами.

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>
Cards

Pretty Hate Machine

Nine Inch Nails

Start listening
Читать далее

Демонстрация карточки

Вот один из вариантов отображения карточки с использованием различных элементов: list card, item-avatar, item-body для изображений и текста, а также футер с классом item-divider.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      the content is from a card-body consisting of an image and paragraph text. The footer
      consists of tabs, icons aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

</div>
Cards

Marty McFly

November 05, 1955

This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of a tabs, icons aligned left, within the card-footer.

1 Like 5 Comments

Читать далее

Формы

Список  также используется для группировки связанных между собой полей для ввода. Item-input и itemнужны для обозначения полей для ввода и соответствующих им названий.

Функционал Ionic создает item-input из элемента label. В этом случае курсор фокусируется в нужной части поля ввода, даже если нажатие было произведено в произвольную часть строки.

Разработчикам стоит обратить внимание на существование различных типов ввода для HTML5, чтобы обеспечить пользователей подходящей клавиатурой.

Forms
Читать далее

Текстовые инпуты: название полей

Пример показывает создание полей для ввода, по умолчанию занимающих всю ширину экрана (без обрамляющих рамок), с применением атрибута placeholder к названию поля. Как только пользователь начнет набирать текст, название поля будет скрыто. Обратите внимание на то, как textarea может быть использован для многострочного ввода текста.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>
Placeholder Labels
Читать далее

Ввод текста: выравнивание названий полей для ввода

Используйте input-label для размещения названия поля слева от предполагаемого места ввода текста. При вводе текста пользователем, название поля не скрывается. Обратите внимание, что Вы также можете пользоваться атрибутом placeholder.

<div class="list">
  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password">
  </label>
</div>
Inline Labels
Читать далее

Ввод текста: фиксация названия полей для ввода

Название поля фиксируется над предполагаемым местом ввода текста. Следует задать item-stacked-label для каждого объекта (поле с названием и место для ввода текста), а input-label для места ввода предполагаемого текста. Пример также показывает использование атрибута placeholder для подсказки пользователям, какую информацию предполагается ввести.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="john@suhr.com">
  </label>
</div>
Stacked Labels
Читать далее

Ввод текста: всплывающие названия полей для ввода

Незакрепленные названия полей схожи с фиксированными, за исключением включающейся анимации при вводе текста – название поля перемещается выше вводимого текста. Для каждого объекта (поле с названием и место для ввода текста) следует задать item-floating-label, а input-label для места, отведенного под ввод текста.

Пример также показывает использование атрибута placeholder для подсказки пользователям, какую информацию предполагается ввести.

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>
Читать далее

Вставка форм

По умолчанию, каждое поле для ввода занимает 100% ширины своего родительского элемента (списка). Тем не менее, Вы можете вставить список, применив класс list list-inset или card. Использование класса card создаст тень под нижней частью карточки. Если для родительского элемента списка установлен padding, то Вы создадите форму с отступами от краев дисплея.

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>
Inset Forms
Читать далее

Инпуты

Применение list-inset приведет к вставке всего списка, а с помощью item-input-inset из отдельного элемента списка можно создать инпут. Пример показывает помещение кнопки в объект.

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>
Inset Inputs
Читать далее

Иконка в поле для ввода

Иконку легко можно разместить в левой части поля item-input, для чего следует добавить иконку перед input. По умолчанию иконка принимает цвет текста, которым написано название поля. Тем не менее, Вы можете использовать placeholder-icon, для придания ей такого же цвета, как само поле.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>
Input Icons
Читать далее

Поле для ввода в шапке

Наряду с кнопками, в шапке можно размещать поля для заполнения формы или отмены действия.

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>
Читать далее

Переключатель

С технической стороны переключатель идентичен чекбоксу в HTLM, за исключением различий в их форме, а также более удобном использовании переключателя для работы на сенсорных устройствах. Функционал Ionic использует label, чтобы было проще нажимать на переключатель или перетаскивать его.

Переключателю можно задавать различные цвета, а также применять toggle-assertive для задания цвета активности переключателя.  

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

Ниже приведен пример использования нескольких переключателей в пределах одного списка. Обратите внимание на то, что класс item-toggle применяется вместе с item для каждой строки списка.

<ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  ...

</ul>
Toggle
  • HTML5
     
  • CSS3
     
  • Flashplayer
     
  • Java Applets
     
  • JavaScript
     
  • Silverlight
     
  • Web Components
     
Читать далее

Чекбокс

Чекбоксы позволяют пользователю выбрать некоторые элементы из полного их списка. Хорошим примером для применения чекбоксов и выбора нужных пунктов из списка является фильтр.

Чекбоксам можно задавать различные цвета, а также применять checkbox-assertive для задания цвета активности флажка.

<ion-list>

  <ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
  <ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
  <ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>

</ion-list>
Checkbox
  • Flux Capacitor
  • 1.21 Gigawatts
  • Delorean
  • 88 MPH
  • Plutonium Resupply
Читать далее

Радиокнопки

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

<ion-list>
  <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
  <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
</ion-list>
Radio Button List
Go
Python
Ruby
.Net
Java
PHP
Читать далее

Ползунок

Ползунки могут быть использованы в различных элементах, например в списках и карточках. Вы можете задать ползунку любой из цветов по умолчанию, которые предлагает функционал Ionic.

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

<div class="list">
  <div class="item range range-positive">
    <i class="icon ion-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-ios-sunny"></i>
  </div>
</div>
Range
Ranges In A List
Читать далее

Селект

Платформа Ionic доработала стиль выбора варианта, опираясь на стиль, который установлен в браузере по умолчанию. Тем не менее, при выпадении списка со значениями, способ выбора нужного значения задается браузером.

Что касается мобильного интерфейса, каждый из них предлагает свой вариант оформления. Например, в браузере на персональном компьютере Вы увидите традиционный выпадающий список, платформа Android использует всплывающий список с радиокнопками, а iOS – настраиваемый список с прокруткой, который занимает нижнюю половину экрана.

<div class="list">

  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>

</div>
Select
Lightsaber
Fighter
Droid
Planet
Читать далее

Вкладки

Tabs

Вкладки представляют собой горизонтально размещенные кнопки или ссылки для навигации между экранами и могут содержать любое сочетание текста и иконок. Это распространенный способ реализации функций навигации в мобильных устройствах.

* Смотрите документацию по Вкладкам для создания интерфейса с использованием вкладок.

Содержащий вкладку элемент должен иметь класс tabs, к каждой вкладке должен быть применен класс tab-item. По умолчанию вкладки создаются только с текстом и без иконок.

<div class="tabs">
  <a class="tab-item">
    Home
  </a>
  <a class="tab-item">
    Favorites
  </a>
  <a class="tab-item">
    Settings
  </a>
</div>

Вкладки можно создавать в соответствии со стандартными цветами, которые предлагает Ionic (в примере используется цвет по умолчанию). Используйте эти классы, чтобы изменить цвет панели с вкладками: tabs-default tabs-light tabs-stable tabs-positive tabs-calm tabs-balanced tabs-energized tabs-assertive tabs-royal tabs-dark

Использование класса tabs-item-hide скрывает панель со вкладками, но оставляет видимым контент. Не забудьте добавить класс has-tabs в директиву ion-content.

 

Читать далее

Вкладки в виде иконок

Используйте tabs-icon-only вместе с классом tabs.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>
Icon-only Tabs
Читать далее

Иконка над названием

Стандартный вид размещения. Используйте tabs-icon-top вместе с классом tabs.

<div class="tabs tabs-icon-top">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    Home
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>
Читать далее

Размещение иконки слева от названия

Используйте tabs-icon-left вместе с классом tabs.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    Home
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>
Читать далее

Вкладке в стиле Android

Используйте tabs-striped для элемента над классом tabs для создания вкладок в стиле операционной системы Android.

По желанию Вы можете использовать tabs-top, чтобы поместить вкладки в верхней части экрана.

Управляйте цветовыми схемами для вкладок с помощью tabs-background-{color} и классами tabs-color-{color}, где {color} принимает значение любого цвета, предлагаемого Ionic по умолчанию: default, light, stable, positive, calm, balanced, energized, assertive, royal, или dark

Добавьте класс has-tabs-top к шапке, чтобы она слилась с цветом вкладок.

 

  <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  
Читать далее

Сетка

Разметка страницы в Ionic отличается от большинства других из-за применения модуля построения гибкой разметки. Преимущество заключается в том, что все устройства, поддерживаемые Ionic, поддерживают адаптивную сеточную разметку.

Просто добавьте несколько колонок в ряд, и они равномерно займут все доступное пространство. Нужно три столбца – добавьте три, нужно пять – добавьте пять. Здесь нет ограничений до 12 столбцов, Вам не нужно заранее задавать конкретные размеры каждой колонки. Более того, Вы можете настроить выравнивание контента в пределах каждой колонки по вертикали.

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

Grid
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Читать далее

Разметка: равное расстояние между колонками

По умолчанию для каждой col, добавленной в один row, будет автоматически задаваться равная ширина в зависимости от оставшегося свободного пространства. Обратите внимание, что в примере ниже нигде не указываются размеры, тем не менее, каждая из пяти колонок примера займет 20% доступной ширины экрана. Все это благодаря адаптивной разметке.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

 

Evenly Spaced Columns
.col
.col
.col
.col
.col
Читать далее

Разметка: заданные размеры колонок

Вы можете задать точные размеры, если захотите создать определенные колонки, которые будут отличаться от остальных в этом ряду. По умолчанию каждая колонка занимает оставшееся пространство равномерно, но бывают случаи, когда надо задать конкретные размеры колонки. Разметка в Ionic использует процентную систему в отличие от фиксированной разметки с 12 колонками.

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

 

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

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Explicit Column Percentage Classnames
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%
Explicit Column Sizes
.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col
Читать далее

Разметка: смещение колонок

Колонки могут быть созданы с отступом от края экрана слева. Пример кода:

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

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

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

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Offset Column Percentage Classnames
.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%
Offset Columns
.col
.col
.col
.col
.col
Читать далее

Разметка: выравнивание колонок по вертикали

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

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

 

<div class="row">
  <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">
  <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-top">
  <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 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 row-bottom">
  <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>

 

Vertically Aligned Columns
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
Читать далее

Адаптивная разметка

В некоторых ситуациях ряд колонок не помещается в отведенное для них место на экране. Адаптивные классы используются для превращения каждой колонки общего ряда - в свой собственный ряд.

Например, если Вы хотите сгруппировать ряд колонок в ситуации, когда место для контента слишком мало, следует применить класс .responsive-sm

<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>
Responsive ClassBreak when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet

Каждый класс использует переменную SaaS, которую можно изменить по своему усмотрению. Вы также можете использовать responsive-grid-break для создания собственных классов.

Responsive Grid
.col
.col
.col
.col
Читать далее

Вспомогательные инструменты

Платформа Ionic предлагает несколько вспомогательных инструментов, с помощью которых Вы быстро сможете создать индивидуальный дизайн для своего приложения. Пользуйтесь этими инструментами по своему желанию.

.
Читать далее

Цвета

Платформа Ionic предлагает пользователю набор цветов по умолчанию, но есть общее правило в соответствии с которым, цвета могут быть замещены. Мы предпочитаем говорить, что Ionic предлагает рекомендуемые названия для цветовых схем, коллекций, тем и так далее.

Цвета по умолчанию нужны для создания правила, по которому задаются имена. Обратите внимание, что Ionic намеренно не использует такие слова как "красный" или "синий", а вместо них предлагает названия цветовых схем, которые ассоциируются с определенной эмоцией или темой.

Если начистоту, то задание цветов - это одна из самых простых задач в CSS, но каждое приложение имеет к этому свои требования. Поэтому цель Ionic заключается в создании понятной базовой системы, которую можно дорабатывать. Мы не стремимся диктовать свои требования остальным приложениям по выбору цветовых схем.

Чтобы кастомизировать цвета, Вам следует переписать те, которые уже существуют в файле ionic.css. Благодаря тому, что Ionic создан с использованием Sass, для дополнительных возможностей и гибкости в работе Вы можете изменить переменные внутри файла _variables.scss.

Utility Colors
  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark
Читать далее

Иконки

Платформа Ionic предлагает бесплатный комплект из более 500 иконок. Используйте icon и класс Ionicon для отображения иконки, общий список которых Вы можете найти на главной странице Ionicons.

<i class="icon ion-star"></i>

Кнопки могут использовать дочерний <i> для установки иконки. Помимо этого, иконку можно установить с помощью задания собственного класса для кнопки.

Примечание: платформа Ionic не ограничивает Вас только встроенным пакетом иконок, Вы можете использовать любой набор по своему желанию.

Ionicons
Читать далее

Отступы

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

Класс padding также используется для создания отступа, в 10px по умолчанию, между контентом и его границами. Ниже перечислены классы, которые не обязательно применять к каждому элементу, но они могут быть полезны.

  • padding отступ между содержанием элемента и его внешней границей со всех сторон
  • padding-vertical отступ сверху и снизу
  • padding-horizontal отступ слева и справа
  • padding-top отступ сверху
  • padding-right отступ справа
  • padding-bottom отступ снизу
  • padding-left отступ слева
Padding
 

The gray square represents an element, and the blue square represents the element's content when padding has been applied.

Читать далее