Классы
Классы в Taptop — это набор пользовательских стилей элемента или виджета. Они нужны для того, чтобы упростить процесс стилизации сайта.
Для изменения дизайна одинаковых элементов достаточно один раз создать класс и сохранить в него нужные стили. Останется применить сохранённый класс к другим аналогичным элементам.
К элементу можно применить любое количество классов, содержащих в себе нужные стили.
Управлять классами можно на вкладке Дизайн правой панели Редактора дизайна.
Каждый элемент содержит стили по умолчанию. Например, это размер или настройки авто-лейаута (Auto Layout). Стили присваиваются элементу автоматически при его добавлении на холст. Это системные стили, они одинаковы для каждого типа элемента или виджета.
Например, у контейнера есть следующие системные стили:
Вы можете переопределить стили элемента, задав другие значения параметров — это будут его локальные стили.
Когда вы добавили элемент на холст и внесли изменения в стили на вкладке Дизайн, они будут уникальны и применены только к выбранному элементу. Это локальные стили элемента.
Когда вы работаете с локальными стилями, метка локальных стилей активна — она выделена цветом брейкпоинта, на котором вы находитесь. Стили, примененные на данном брейкпоинте, также приобретают этот цвет.
Такой способ стилизации подойдёт, если стили элемента не придётся переиспользовать. Например, таким способом можно добавить шрифт для всего проекта, применив его для слоя Root.
Если вы хотите добавить одинаковые стили для нескольких элементов, создайте Пользовательский класс, который будет содержать в себе нужные свойства.
Как работать с классами:
- Создайте класс для элемента и настройте для него нужные стили.
- Присвойте этот класс другим элементам в проекте, у которых должны быть аналогичные стили.
Например, можно создать класс со стилями для контейнера и использовать его для каждого контейнера в проекте.
Пользовательский класс будет выделен цветом брейкпоинта, для которого он создан.
Чтобы создать пользовательский класс, кликните в поле Источники стилей, введите желаемое название класса и нажмите Enter.
Например, cоздадим для контейнера класс с названием main-container.
В названии класса используйте буквы латинского алфавита. Название не может начинаться с цифры и содержать пробелы.
Нельзя создать класс с такими названиями, как "section", "container", "div" и т.д., так как они используются в системных классах Taptop.
Когда создается новый класс, он становится активным, и вы можете сразу добавлять в него стили. Название класса будет выделено цветом брейкпоинта, на котором вы находитесь. Все стили, которые вы зададите в активном классе, будут сохранены в нем.
Иконка с восклицательным знаком слева от названия класса показывает, что в классе пока не заданы стили. Как только вы добавите хотя бы один стиль, иконка пропадет.
Вы можете создать для элемента несколько классов, каждый со своим набором стилей. Добавить еще один класс можно так же, как и первый — кликните справа от ранее созданного класса, введите нужное название и нажмите Enter.
Когда вы только что создали класс, он пустой и не содержит стилей. Чтобы добавить в класс стили элемента, настройте нужные свойства на панели стилей ниже.
Перед тем как добавить стили, убедитесь, что вы открыли нужный класс. В поле Источники стилей название активного класса выделено цветом. Если нужный класс не активен, переключитесь на него, кликнув по его названию.
Например, добавим отступы для контейнера в класс main-container:
- Проверяем, что класс активен — выделен цветом.
- Задаем значения внутренних отступов на панели стилей.
Готово! Элементу добавлен класс main-container с внутренними отступами 20 и 15px.
Поочерёдно добавляйте свойства стилей, чтобы наполнить класс нужными параметрами.
Чтобы посмотреть список всех стилей, добавленных в класс, можно навести курсор на его название — список отобразится в тултипе.
Вы можете создать для элемента несколько классов, каждый со своим набором стилей. Добавить еще один класс можно так же, как и первый — кликните справа от ранее созданного класса, введите нужное название и нажмите Enter.
Вы можете присвоить элементу любой класс, который уже добавлен в проект. Например, задать контейнеру цвет фона с помощью ранее созданного класса background.
Для этого кликните на свободное пространство в поле Источники стилей и выберите из списка один из ранее созданных классов. Чтобы быстрее найти нужный класс, начните вводить его название — в списке останутся только совпадающие с искомым классы.
Выбранный класс будет присвоен элементу и отобразится в списке его классов. При этом данный класс станет активным (выделен цветом текущего брейкпоинта) и на панели стилей будут отображены свойства, которые в нем заданы — они также будут выделены цветом.
Один и тот же класс можно переиспользовать не только для одинаковых элементов, но и задавать стили для абсолютно разных элементов. Например, класс background можно использовать, чтобы задать цвет фона и для контейнера, и для карточки.
Вы можете присвоить элементу несколько классов. Это делается аналогичным образом, как и присвоение первого класса.
Пользовательские классы можно:
- Переименовать (Rename);
Классу можно задать имя, которое максимально точно и понятно опишет его назначение. Например, класс border-radius будет отвечать за скругление углов элементов.
- Дублировать (Duplicate);
Вы можете создать копию класса, содержащую все примененные к нему стили, и далее изменить некоторые стили для создания модификации исходного класса. Например, вновь созданный класс button-color-contact может отвечать за цвет кнопок, которые нужны для сбора контактных данных посетителей сайта.
- Дублировать и заменить (Duplicate and replace);
Так вы можете одновременно скопировать класс и заменить его у выбранного элемента.
- Удалить из элемента (Delete from the element);
Удалите класс из элемента — это удалит стили выбранного элемента, однако для других элементов с этим классом настройки стилизации сохранятся.
- Удалить из проекта (Delete from the project).
Если удалить класс из проекта, у всех элементов, которым был присвоен этот класс, будут удалены пользовательские стили.
Чтобы выполнить действие с ранее созданным классом, нужно:
- кликнуть на открывающийся список справа от названия класса;
2. выбрать нужное действие.
Для начала разберемся, каким образом заданные стили применяются к элементу, и как это выглядит на панели стилей.
К элементу применяются:
- его локальные стили — они наименее приоритетные,
- стили всех присвоенных ему классов — они перекрывают локальные стили.
Если у элемента добавлено несколько классов, то приоритет будет у того класса, который находится ближе к концу списка.
Если какое-либо свойство (например, цвет фона) задано для элемента сразу в нескольких классах, то к нему применится значение из самого последнего в списке класса.
Например, если у секции есть два класса:
- section-padding с внутренними отступами 100px
- section-100 с внутренними отступами 0px
То к секции применится значение из последнего в списке класса — section-100 и внутренние отступы будут 0px.
Открытый (активный) класс, стили которого вы редактируете, выделен цветом текущего брейкпоинта. Этим же цветом выделены свойства, которые в нем заданы.
Когда открыты локальные стили:
Если какое-то свойство элемента задано в пользовательском классе, то его значение скрывается плашкой с названием этого класса. При клике на плашку происходит переключение на этот класс, чтобы можно было изменить его стили.
Например, если внутренние отступы для контейнера заданы в классе main-container, то на месте их значений отображается название этого класса.
Когда открыт пользовательский класс:
Если какое-либо свойство задано в более приоритетном классе, то его значение скрывается плашкой с названием этого класса. При клике на плашку происходит переключение на этот класс, чтобы можно было изменить его стили.
Например, если у контейнера открыт класс main-container, а цвет фона задан в классе background, то в значении этого свойства отображается название класса background.
Если одно и то же свойство задано одновременно в нескольких классах, система покажет название класса с наивысшим приоритетом и метку «+1». Это означает, что свойство определено более чем в одном классе, но применяется приоритетное значение. При клике на метку «+1» отобразятся названия этих классов.
Изменение локальных стилей влияет только на стили данного элемента.
- Кликните на метку локальных стилей, чтобы открыть их.
2. Измените нужные свойства на панели стилей ниже.
Готово! Все свойства, которые вы задали элементу при активной метке локальных стилей, будут автоматически сохранены в них.
Изменение стилей класса, который присвоен нескольким элементам проекта, автоматически влияет на стили всех этих элементов.
Вы можете менять стили класса на любом из элементов, которым он присвоен, и эти изменения автоматически будут применены к остальным элементам.
Сделав изменение один раз, вы получите его сразу у всех нужных элементов. Это позволяет упростить процесс стилизации сайта.
- Кликните на название нужного класса, чтобы открыть его стили.
2. Измените нужные свойства на панели стилей ниже.
Готово! Все свойства, которые вы задали активному классу, будут автоматически сохранены в нем.
Если вы добавили в класс стиль, но хотите его удалить, сделайте следующие действия:
- Зажмите клавишу Shift и наведите курсор на свойство. Появится метка с затемнением и надписью Сброс.
- Кликните мышкой по метке. Стиль сбросится до дефолтного значения или до значения в предыдущем по приоритету классе.
