Ionic — Цвета

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

Классы ионного цвета

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

В следующей таблице показан набор из девяти цветов по умолчанию, предоставленных Ionic. Мы будем использовать эти цвета для стилизации различных ионных элементов в этом уроке. На данный момент вы можете проверить все цвета, как показано ниже —

Использование ионного цвета

Ionic использует разные классы для каждого элемента. Например, элемент заголовка будет иметь класс bar, а кнопка будет иметь класс button . Чтобы упростить использование, мы используем разные цвета, добавляя префикс класса элемента к имени цвета.

Например, чтобы создать заголовок синего цвета, мы будем использовать бар-штиль следующим образом:

<div class = "bar bar-header bar-calm">
   ...
</div>

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

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

Вы также можете использовать цветовой класс Ionic, как и любой другой класс CSS. Теперь мы будем стилизовать два абзаца со сбалансированным (зеленым) и активированным (желтым) цветом.

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

Приведенный выше код создаст следующий экран —

Мы подробно обсудим в следующих главах, когда будем создавать разные элементы, используя разные классы.

Настройка цветов с помощью CSS

Если вы хотите изменить некоторые из цветов Ionic по умолчанию с помощью CSS, вы можете сделать это, отредактировав файл lib / css / ionic.css . В некоторых случаях этот подход не очень продуктивен, потому что каждый элемент (заголовок, кнопка, нижний колонтитул …) использует свои собственные классы для стилизации.

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

Настройка цветов с помощью SASS

SASS (сокращение от « Программное обеспечение как услуга» ) обеспечивает более простой способ изменения цвета для всех элементов одновременно. Если вы хотите использовать SASS, откройте ваш проект в командном окне и введите —

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

Это настроит SASS для вашего проекта. Теперь вы можете изменить цвета по умолчанию, открыв файл scss / ionic.app.scss и введя следующий код перед этой строкой: @import «www / lib / ionic / scss / ionic»;

Мы изменим сбалансированный цвет на темно-синий, а заряженный цвет на оранжевый. Два абзаца, которые мы использовали выше, теперь темно-синий и оранжевый.

$balanced: #000066 !default;
$energized: #FFA500 !default;

Теперь, если вы используете следующий пример —

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

Приведенный выше код создаст следующий экран —

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

Важная заметка

Файл www / css / style.css будет удален из заголовка index.html после установки SASS. Вам нужно будет связать его вручную, если вы все еще хотите его использовать. Откройте index.html и затем добавьте следующий код в заголовок.