Классы

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

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

Управлять классами можно на вкладке Дизайн правой панели Редактора дизайна.

Видео: Как работать с классами

Системные стили

Каждый элемент содержит стили по умолчанию. Например, это размер или настройки авто-лейаута (Auto Layout). Стили присваиваются элементу автоматически при его добавлении на холст. Это системные стили, они одинаковы для каждого типа элемента или виджета.

Например, у контейнера есть следующие системные стили:

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

Локальные стили

Когда вы добавили элемент на холст и внесли изменения в стили на вкладке Дизайн, они будут уникальны и применены только к выбранному элементу. Это локальные стили элемента.

Когда вы работаете с локальными стилями, метка локальных стилей активна — она выделена цветом брейкпоинта, на котором вы находитесь. Стили, примененные на данном брейкпоинте, также приобретают этот цвет.

Такой способ стилизации подойдёт, если стили элемента не придётся переиспользовать. Например, таким способом можно добавить шрифт для всего проекта, применив его для слоя Root.

Пользовательские классы

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

Как работать с классами:

Создайте класс для элемента и настройте для него нужные стили.

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

Например, можно создать класс со стилями для контейнера и использовать его для каждого контейнера в проекте.

Создание пользовательских классов

Чтобы создать пользовательский класс, кликните в поле Источники стилей, введите желаемое название класса и нажмитеEnter.

Например, cоздадим для контейнера класс с названием main-container .

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

Вы можете создать для элемента несколько классов, каждый со своим набором стилей. Добавить еще один класс можно так же, как и первый — кликните справа от ранее созданного класса, введите нужное название и нажмите Enter.

Вы можете быстро переименовать слой, применив к нему название выбранного класса, нажав специальную кнопку над полем со списком классов. Например, для класса main-container слой будет называться так же — main-container. Это удобно для построения понятной иерархии элементов в слоях.

Добавление стилей в пользовательский класс

Когда вы только что создали класс, он пустой и не содержит стилей. Чтобы добавить в класс стили элемента, настройте нужные свойства на панели стилей ниже.

Например, добавим отступы для контейнера в класс main-container:

Проверяем, что класс активен — выделен цветом.

Задаем значения внутренних отступов на панели стилей.

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

Создание нескольких классов для элемента

Вы можете создать для элемента несколько классов, каждый со своим набором стилей. Добавить еще один класс можно так же, как и первый — кликните справа от ранее созданного класса, введите нужное название и нажмите Enter.

Присвоение элементам ранее созданного класса

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

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

Выбранный класс будет присвоен элементу и отобразится в списке его классов. При этом данный класс станет активным (выделен цветом текущего брейкпоинта) и на панели стилей будут отображены свойства, которые в нем заданы — они также будут выделены цветом.

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

Действия с пользовательскими классами

Пользовательские классы можно:

Переименовать (Rename);

Классу можно задать имя, которое максимально точно и понятно опишет его назначение. Например, класс border-radius будет отвечать за скругление углов элементов.

Дублировать (Duplicate);

Вы можете создать копию класса, содержащую все примененные к нему стили, и далее изменить некоторые стили для создания модификации исходного класса. Например, вновь созданный класс button-color-contact может отвечать за цвет кнопок, которые нужны для сбора контактных данных посетителей сайта.

Дублировать и заменить (Duplicate and replace);

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

Удалить из элемента (Delete from the element);

Удалите класс из элемента — это удалит стили выбранного элемента, однако для других элементов с этим классом настройки стилизации сохранятся.

Удалить из проекта (Delete from the project).

Если удалить класс из проекта, у всех элементов, которым был присвоен этот класс, будут удалены пользовательские стили.

Чтобы выполнить действие с ранее созданным классом, нужно:

кликнуть на открывающийся список справа от названия класса;

выбрать нужное действие.

При переименовании класса — введите новое название и нажмите Enter .

Как редактировать стили

Для начала разберемся, каким образом заданные стили применяются к элементу, и как это выглядит на панели стилей.

Приоритизация стилей

К элементу применяются:

его локальные стили — они наименее приоритетные,

стили всех присвоенных ему классов — они перекрывают локальные стили.

Например, если у секции есть два класса:

section-padding с внутренними отступами 100px

section-100 с внутренними отступами 0px

То к секции применится значение из последнего в списке класса — section-100 и внутренние отступы будут 0px.

Отображение свойств на панели стилей

Открытый (активный) класс, стили которого вы редактируете, выделен цветом текущего брейкпоинта. Этим же цветом выделены свойства, которые в нем заданы.

Когда открыты локальные стили:

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

Например, если внутренние отступы для контейнера заданы в классе main-container, то на месте их значений отображается название этого класса.

Когда открыт пользовательский класс:

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

Например, если у контейнера открыт класс main-container, а цвет фона задан в классе background, то в значении этого свойства отображается название класса background.

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

Изменение локальных стилей элемента

Кликните на метку локальных стилей, чтобы открыть их.

2. Измените нужные свойства на панели стилей ниже.

Изменение стилей в пользовательском классе

Кликните на название нужного класса, чтобы открыть его стили.

2. Измените нужные свойства на панели стилей ниже.

Удаление стилей, заданных в классе

Если вы добавили в класс стиль, но хотите его удалить, сделайте следующие действия:

Зажмите клавишу Shift и наведите курсор на свойство. Появится метка с затемнением и надписью Сброс.

Кликните мышкой по метке. Стиль сбросится до дефолтного значения или до значения в предыдущем по приоритету классе.