11/08/2023
#задачи
Решение прошлой задачи
Напомню: Есть вот такое меню, как его организовать в виде вариантов. Как лучше это сделать?
Ее решить можно разными способами. Я выбрал способ с разделенными компонентами
По порядку
Все делаем через autolayout. На этом больше останавливаться не буду.
Глядя на пример я четко вижу 2 вида меню: внутреннее и внешнее. Вообще, это все можно воткнуть в один стек компонентов с разными состояниями и размерами. Но получится слишком запутанно. + так не принято в среде разрабов. Ведь по идее, твой макет кто-то будет превращать в код. А они очень любят все делить по папочками мелкими партиями. Поэтому, я принял решение то же разделить меню на 2 варианта: внутреннее и внешнее
Вопрос возник по внешнему меню. Главному. как видишь, их тут есть 2 достаточно отличных варианта. С иконками и без них. Это без проблем дополняется в самом варианте вкл/выкл иконки. Только есть проблемка с отступами. Поэтому к внешним пунктам добавим еще одну переменную — отступ.
Итого мы имеем стек вариантов пункта меню в котором меняется положение и кво иконок + меняется отступ слева.
Внутренние пункты меню
Тут все супер просто. Создаем варианты состояний и все. Из сложного тут вижу, что есть бордер. сегодня фигма умеет добавлять такой бордер с одной стороны. можно сделать его через свитчер вкл/выкл. А можно и не делать. По умолчанию оставить с бордером, без возможности убрать.
Как будут выглядеть варианты внутреннего пункта — все равно. В примере активный пункт зеленый и с бОльшим бордером слева. Hover, focus и прочие делаем по аналогии
При желании можно добавить иконки, но, как по мне, это излишне нагрузит макет.
Если делать чз лайаут, что все будет скейлиться по горизонтали без проблем и влезет в любой макет
В чем смысл такой задачки? В том, чтобы научиться продумывать свою систему и закладывать в варианты нужное поведение элементов. Сделать это всегда можно несколькими способами. В этом примере, разделить на стека(внутреннее и внешнее), положить все в один, положить все в три(внутреннее, внешнее, внешнее-второстепенное)
Это не облака рисовать на лендосах
