Figsight #5: Снимаем маски
И снова о полях ввода. Можно ли имитировать ввод по маске? Ответ ждёт в этой статье.
Определим цель
Рассмотрим поле ввода телефона. Что мы о них знаем? У них есть префикс, возьмём, например, классический +7 и фиксированное количество символов. В отличие от поля с паролем, маска может отображаться на месте ещё не введённых символов, поэтому нам нужен совершенно иной подход. Первое, что приходит в голову, — маска всегда присутствует, а введённые символы заменяют её. Попробуем.
Получается такая конструкция: всё работает, если Phone — это единое значение через component properties. Внутри Mask Wrapper: Spacer полностью белый, а Phone полностью прозрачный. Констрейнты (Constraints) Phone Mask Wrapper и Mask Wrapper установлены в Left и Right соответственно. Это достаточно тривиальное решение, хотя и не без проблем, поскольку различные цифры имеют разную ширину.
Можно ли реализовать более изящно? Конечно! Воспользуемся AL Wrap и новым трюком:
Reverse Wrap
По умолчанию порядок «перехода» на следующую строку в AL Wrap — от последнего к первому. Если отразить такой Wrap по горизонтали, а затем отразить всё содержимое ещё раз, как в трюке Reverse AL из первой статьи (наконец-то он пригодился), порядок изменится на противоположный.
Теперь мы можем решить задачу новым способом:
Не так эстетично, как хотелось бы, зато экстравагантно.
Подождите! А что если объединить подходы из всех предыдущих статей? Как вы измеряете безумие?
На сегодня всё. Мы обязательно встретимся вскоре и поговорим о ещё более сложных, но интересных трюках. Как обычно, достижение от меня.
Пример в фигме доступен по ссылке
Продолжаем расширять границы автоматизации в Figma. Сегодня разберем новый способ работы с динамическими элементами. Уверен, этот метод пригодится вам в проектах!
Сегодня попробуем собрать компонент неожиданным способом и разберемся, как работают оверрайды в Figma.
Как насчёт иконок, которые автоматически меняют детализацию в зависимости от размера и при этом не ломаются? Сегодня разберёмся, как этого добиться.
На днях интернет взорвался — видео с двумя ИИ-ассистентами, которые будто бы «шепчутся» между собой, используя странные звуки. В комментариях тут же появились панические теории: «Искусственный интеллект научился тайно переговариваться!». Я решил копнуть глубже и выяснить, что же на самом деле происходит. Спойлер: это не бунт машин, но довольно инте…
Мощный аккумуляторный ударный гайковёрт — это инструмент, на который можно положиться в самых сложных условиях. Он легко справляется с закисшими болтами, креплением подвески и крупным монтажом, без розеток и компрессоров. В этой подборке — 10 действительно сильных моделей, проверенных делом.
В статьях про атомарный дизайн есть одна большая проблема: в одной кнопка считается атомом (пример), а в другой — уже молекулой (другой пример).
Когда повседневность становится совсем уж повседневной, и в голову начинают приходить разные мысли про новую жизнь или новый уровень, или ещё какую красоту в будущем, хорошо бы иметь несколько идей, а лучше одну — как собрать голову в план, который точно сработает и приведет к желаемому результату.
Представьте обычное утро в метро. Вы подходите к турникету, прикладываете карту, и... турникет решает, пропустить вас или нет. В этот момент происходит маленькое чудо автоматизации – турникет действует как конечный автомат, простая но эффективная система принятия решений.