Как сделать кнопку неактивной в Тильде (Zero-block)

Сергей Бурмистров — Wed, 24 Aug 2022 16:21:27 +0000

(Или как переключать активность кнопки по клику на чек-боксе) — именно такое поведение необходимо, например, когда банк требует, чтобы кнопка оплаты была неактивной ДО согласия посетителя с правилами. Для этого обычно предлагается разместить над кнопкой чек-бокс, выбирая который, пользователь активирует кнопку. Понятно, что в случае html+css вопросов не возникает — у тега

<button>

может быть псевдокласс :disabled, с которым кнопка становится неактивной (отключённой).

Но мы рассмотрим вопрос, как сделать кнопку неактивной, применительно к Тильде, потому что в Тильде нет <button>. И потому что есть способ гораздее. Читайте ниже.

Первое, что я обычно делаю, когда возникает вопрос «Как сделать неактивную кнопку на Тильде» — это иду в официальный help и смотрю в экран:

Следующим шагом можно поискать информацию в сети, но чаще всего там не то, что нужно.
После этого становится ясно, что придётся включить голову и применить знакомые инструменты, а именно:

A. Кнопки и шейпы
B. Пошаговую анимацию элементов

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

Тут важно, что настроить пошаговую анимацию нужно только для картинки, изображающей выбранный чек-бокс (с «галочкой»). В настройках пошаговой анимации делаем клик по верхней прозрачной и невидимой кнопке триггером, запускающим анимацию. Сама анимация — проявление данной картинки (Прозрачность 0% -> 100%).

Эту же анимацию потом копируем на все остальные анимированные элементы, немного модифицируя эти анимации. Неизменным остаётся только триггер — клик по нашему псевдо-чекбоксу.

Начинаем с того, что делаем неактивную кнопку серого цвета. Примерно вот такую:

Тут самое главное, чтобы у пользователя не возникло желания на неё кликнуть и с первого взгляда было понятно, что кнопка не сработает. В принципе, совсем необязательно, чтобы это была именно кнопка. Достаточно и просто картинки или шейпа (shape) нужного размера. Нужный размер здесь — это размер точно такой же, как у активной кнопки.

Вторым шагом делаем такую же по форме кнопку, но по виду всю такую «активную»:

Размещаем её точно над первой серой кнопкой. Больше ничего не трогаем. Тут пока самое главное, чтобы кнопка явно кричала: «Нажми меня, Алиса! Я-кнопка!» При этом этот элемент так же не обязан быть кнопкой. Почему? Объясню чуть ниже.

Вы уже догадались, что следующим шагом я с помощью анимации выведу прозрачность у активной кнопки из 0 к 100%, а прозрачность неактивной уберу со 100% до 0?

Я тоже так думал. Но так не работает. Потому что даже полностью прозрачная активная кнопка сохраняет свою активность, если она находится в верхнем слое, выше, чем серая. Даже если её не видно, по ней все равно можно кликнуть и перейти. Но её так или иначе придётся скрывать до момента, пока не выбран чек-бокс (хотя бы визуально), так что продолжаем работать.

Анимация красной кнопки — это наша вторая анимация. Эту анимацию мы просто скопируем из первой и применим к элементу красной кнопки, только сделаем так, что она сначала (то есть на Шаге 1) — полностью прозрачна, а на Шаге 2 — полностью проявлена. Триггер — тот же. Серая кнопка точно так же и за то же время «исчезает» ((Opasity = 100->0). (Это уже третья анимация).

Внимание! В панели настроек все кнопки должны изначально быть проявлены (Opasity = 100), их прозрачность мы настраиваем только в анимации!

Как же сделать, чтобы кнопка работала после выбора чек-бокса и НЕ работала до его выбора?
Применим смекалку и еще один прозрачный шейп.

Итого бутерброд из элементов у нас состоит из 3 этажей:

Неактивная серая кнопка
Красная кнопка, делающая вид, что она активная
Прозрачный шейп над этими кнопками, к которому привязан url кнопки и который по сути кнопкой и является. Но изначально он будет стыдливо прятаться за пределами экрана и перейти по нему до той поры, как он займёт своё законное место строго над нашими рисованными кнопками, мы не сможем, потому что его изначально не будет на месте кнопки.

1 шаг анимации. Шейп выведен за пределы видимости из Зеро-блока (удостоверьтесь, что в настройках блока у вас стоит OVERFLOW — hidden)
2 шаг анимации. Приводим шейп на место кнопки. Всё, кнопка активна! И путешествия прозрачного шейпа по экрану никто не увидит. На этапе настройки можете задать цвет шейпу и некоторую прозрачность, чтобы удостовериться, что он двигается как научили, а не как попало).

Таким образом, клик по триггеру — кнопке над нашим чекбоксом запустит сразу 4 анимации:

Проявится галочка внутри чекбокса — теперь он выбран
(и 3) — Серая кнопка станет прозрачной, а красная проявится и станет непрозрачной. Т. к. красная кнопка имеет тень, а анимация имеет длительность (DURATION = 0,2s), создаётся иллюзия, что кнопка «всплывает», обретая одновременно цвет
Из ниоткуда приплывёт прозрачная активная кнопка и накроет своим прозрачным телом красную кнопку. Теперь мы можем кликнуть по этой кнопке и перейти куда надо.

Оставьте комментарий, если было полезно.

Бурмистров Таргет: заметки с тегом пост-инструкция

Как сделать кнопку неактивной в Тильде (Zero-block)