Framework7 - Цветовые темы

Описание

Framework7 предоставляет различные цветовые темы для ваших приложений.

Цветовая тема предоставляет различные типы цветов темы, используемые для плавной работы с приложениями, как указано в таблице ниже -

S.No	Тип и описание темы
1	Цвета тем iOS Для приложения можно использовать 10 различных цветовых тем iOS по умолчанию.
2	Цвета темы материала Framework7 предоставляет 22 различных цветовых темы материалов по умолчанию для приложения.

Применение цветовых тем

Framework7 позволяет применять цветовые темы к различным элементам, таким как страница, блок списка, панель навигации, строка кнопок и т. Д., Используя класс theme- [color] для родительского элемента.

пример

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Темы макета

Вы можете использовать тему макета по умолчанию для своего приложения, используя две темы - белую и темную . Темы можно применять к родительскому элементу с помощью класса layout- [theme] .

пример

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Вспомогательные классы

Framework7 предоставляет дополнительные вспомогательные классы, которые можно использовать вне тем или без них, как указано ниже:

• color-[color] - Его можно использовать для изменения цвета текста блока или цвета кнопки, ссылки, значка и т. Д.

• bg-[color] - Устанавливает предопределенный цвет фона для блока или элемента.

• border-[color] - Устанавливает предопределенный цвет границы на блоке или элементе.