Классы и состояния
Классы в Taptop — это набор пользовательских стилей элемента или виджета. Они нужны для того, чтобы упростить процесс стилизации сайта.
Для изменения дизайна одинаковых элементов достаточно задать стили одному и сохранить их в класс. Останется применить сохранённый класс к другим аналогичным элементам. К элементу можно применить любое количество классов, содержащих в себе нужные стили.
Управлять классами можно на вкладке Дизайн правой панели Редактора дизайна.
Каждый элемент содержит стили по умолчанию. Например, это размер или настройки авто-лейаута (Auto Layout). Стили присваиваются элементу автоматически при его добавлении на холст. Это системные стили, они не меняются, однако вы можете переопределить стили элемента.
Если внести изменения в стили на вкладке Дизайн, они будут уникальны и применены только к выбранному элементу. Это уникальные стили элемента.
Если вы хотите добавить одинаковые стили для нескольких элементов, создайте Класс, который будет содержать в себе нужные свойства.
У элемента может не быть классов, в этом случае стили будут доступны на вкладке Дизайн. Такие стили — уникальные. Чтобы задать такие стили, не нужно создавать класс, достаточно выбрать нужные параметры на вкладке Дизайн.
Такой способ стилизации подойдёт, если стили элемента не придётся переиспользовать. Например, таким способом можно добавить шрифт для всего проекта, применив его для слоя Root.
Уникальные стили выделены цветом брейкпоинта, для которого они добавлены.
Пользовательские классы позволяют сохранить настройки стилей, таким образом вы можете их переиспользовать. Создав класс для элемента, вы можете настроить для него нужные стили. Далее присваивайте этот класс и другим элементам в проекте, у которых должны быть аналогичные стили.
Пользовательский класс будет выделен цветом брейкпоинта, для которого он создан.
Можно присваивать элементу несколько классов, тем самым определяя для него наборы стилей разных типов. Например, можно создать для кнопок классы button-big и button-small со стилями размеров и типографики и классы button-success и button-info, определяющие функциональность кнопок. Таким образом вы сможете комбинировать эти классы, применяя их к разным кнопкам, для создания нужных вариантов интерфейсных решений.
Чтобы добавить пользовательский класс, нажмите на «+» в поле Классы (Classes).
По умолчанию класс создаётся с названием class, вы можете его заменить. Для этого введите нужное название в открывшемся блоке. Например, создадим класс button-color, который будет отвечать за цвет кнопки.
В названии класса используйте буквы латинского алфавита. Название не может начинаться с цифры и содержать пробелы.
Чтобы сохранить класс, нажмите кнопку Enter на клавиатуре. Класс отобразится в списке классов элемента. Теперь ему можно задавать стили.
Когда вы создаёте класс, он добавляется без заданных стилей. Добавьте стили, за которые будет отвечать созданный класс. Добавим фон для созданного класса button-color.
Чтобы добавить нужные стили, выполните следующие действия:
- Нажмите на «плюс» рядом с нужным свойством. Стили добавляются отдельно для каждого выбранного свойства;
- Настройте нужные свойства. Добавим «Цвет фона» (Background color).
Поочерёдно добавляйте свойства стилей, чтобы наполнить класс нужными параметрами.
Вы можете присвоить элементу любой класс, который уже добавлен в проект. Например, задать блоклисту цвет фона. Для это выберете на холсте элемент и выполните следующие действия:
- кликните на «+» в поле «Классы»;
- начните вводить название желаемого класса background-color — снизу откроется список классов проекта, которые совпадают с искомым;
- кликните по нужному классу, он будет присвоен элементу и отобразится в списке его классов. Также вы увидите сколько классов присвоено элементу.
Один и тот же класс можно переиспользовать не только для одинаковых элементов, но и задавать стили для абсолютно разных элементов.
Пользовательские классы можно:
- Переименовать (Rename);
Классу можно задать имя, которое максимально точно и понятно опишет его назначение. Например, класс border-radius будет отвечать за скругление углов элементов.
В названии класса используйте буквы латинского алфавита. Название не может начинаться с цифры и содержать пробелы.
- Дублировать (Duplicate);
Вы можете создать копию класса, содержащую все примененные к нему стили, и далее изменить некоторые стили для создания модификации исходного класса. Например, вновь созданный класс button-color-contact может отвечать за цвет кнопок, которые нужны для сбора контактных данных посетителей сайта.
- Дублировать и заменить (Duplicate and replace);
Так вы можете одновременно скопировать класс и заменить его у выбранного элемента.
- Удалить из элемента (Delete from the element);
Удалите класс из элемента — это удалит стили выбранного элемента, однако для других элементов с этим классом настройки стилизации сохранятся.
- Удалить из проекта (Delete from the project).
Если удалить класс из проекта, у всех элементов, которым был присвоен этот класс, будут удалены пользовательские стили.
Чтобы выполнить действие с ранее созданным классом, нужно:
- кликнуть на поле «Применённые классы», чтобы открыть список;
- навести на нужный класс и нажать «Редактировать»;
3. открыть контекстное меню рядом с названием класса, кликнув на «три точки»;
4. выбрать нужное действие в списке.
Для того, чтобы изменить существующие стили класса, нажмите на кнопку «Редактировать» в списке классов или кликните на название класса на панели стилей. Откроется интерфейс редактирования стилей класса.
По инструкции выше настройте нужные параметры стилей. Таким образом, можно последовательно определить стили для всех классов элемента, переключаясь между ними.
Изменение стилей класса, который присвоен нескольким элементам проекта, автоматически влияет на стили всех этих элементов. Вы можете менять стили класса на любом из элементов, которым он присвоен, и эти изменения автоматически будут применены к остальным элементам.
Например, нужно изменить цвет фона кнопок, которые позволяют пользователю оставить заявку на сайте. .
- Выберите на холсте одну из кнопок, в поле «Классы» добавьте новый класс или выберите уже созданный класс button-color.
- Задайте классу нужный цвет фона, например, один из оттенкого зеленого.
- Присвойте получившийся класс button-color другим подобным элементам проекта.
Готово! Нужный фон будет применён ко всем кнопкам, которые помогают пользователю оставить заявку на сайте.
Сделав изменение один раз, вы получите его сразу у всех нужных элементов. Это позволяет упростить процесс стилизации сайта.
Если вы присвоили элементу несколько классов, то к нему будут применены стили всех этих классов. Если в двух или нескольких классах задан один и тот же параметр стиля, но с разными значениями (например, в одном классе задан зеленый цвет фона, а в другом — синий), то приоритет будет у того класса, который находится ближе к началу списка.
Например, у кнопки задано скругление углов и фоновый цвет. Применены классы: button-color-green (отвечает за зелёный цвет фона), button-color-blue (отвечает за синий цвет фона) и button-border (отвечает за скругление углов).
Поскольку классы button-color отвечают за один параметр, приоритет будет у button-color-blue — он находится ближе к началу списка, цвет фона кнопки будет синим.
button-border — единственный класс, отвечающий за скругление углов, поэтому эти стили будут применены.
Если элементу присвоено более 1 класса с одинаковыми стилями, приоритетный будет доступен на панели стилей.
Остальные вы можете увидеть, кликнув по кнопке с числом рядом с названием класса.
Для каждого элемента или пользовательского класса можно отдельно стилизовать состояния. Для этого нажмите на «+» рядом со списком состояний и выберите нужное значение.
Добавить состояние для уникальных элементов можно на вкладке Дизайн. Это будут состояния уникальных стилей.
Для того, чтобы добавить состояние, откройте список в блоке «Состояние» и добавьте нужное.
Чтобы стилизовать различные состояния элемента с уникальными классами, поочерёдно выбирайте состояния из списка.
Например, изменим прозрачность элемента в состоянии «при наведении».
Чтобы добавить состояние для элемента, к которому применён пользовательский класс, откройте настройки редактирования класса. Например, добавим состояние «при наведении» для класса button-color-green.
Для этого:
- кликните на «Примененные классы» и перейдите в режим редактирования класса.
Класс, применённый к элементу, будет выделен синим цветом.
- выберите нужно состояние в списке.
Если состояние уже добавлено, оно будет доступно для выбора. Чтобы перейти к редактированию, кликните по названию состояния.
- добавьте нужные стили. Например, прозрачность цвета фона.
Чтобы добавить различные состояния для пользовательского класса, поочерёдно выбирайте состояния из списка.
Если вы хотите задать разные стили пользовательского класса в одном состоянии, но для разных брейкпоинтов, создайте класс для нужного состояния в базовом разрешении (компьютер). После этого вы сможете добавлять состояния для остальных брейкпоинтов.
Выберите в списке классов нужный, нажав «Примененные классы», и перейдите в режим его редактирования. Добавьте нужное состояние по инструкции выше. Например, добавим селектор для состояния «При наведении».
Чтобы добавить состояние для другого брейкпоинта, переключитесь на него. Например, перейдём на разрешение «Планшет». Для этого выберите брейкпоинт в центре верхней панели. Так вы перейдёте к стилизации для брейкпоинта «Планшет» — задайте нужные стили.
Готово! Для выбранного состояния цвет пользовательского класса будет выделен цветом брейкпоинта.
По аналогии вы можете добавлять стили брейкпоинтов для уникальных элементов, стили которых доступны на панели Дизайн.