Собирайте в вариативный компонент, чтобы можно было переключать состояния элементов на экранах. В десктопе у чекбоксов, радиокнопок и тогглов по 8 состояний: Initial — начальное состояние, Hover — при наведении мыши, Focus — при выборе кнопки с клавиши Tab, Disabled — неактивное состояние у включенных и те же — у выключенных.
Ребятки, эта статья чудо.
Я все вот это пол года по крупицам собирал с курсов, с ютуба, статей всяких и просто изучая чужие дизайн-системы. Честно, очень тяжело было понять особенно как работает AL, а с этой статьей все встало на места (даже понял как статус бар запилить с лайном любой длинны, а раньше это делал ручками).
И даже тут узнал кучу нового про AutoLayout, например про автоспейс.
Если вам нужна кнопка другой высоты — придется создавать отдельный компонент.
Почему именно эта характеристика делает его новым компонентом?
Единственное что не понял...
Спасибо!
С точки зрения верстки, высота кнопки - это, как правило, постоянная величина. Т.е высота кнопки не имеет поведения. Высота задается как "размер шрифта (px) + высота паддингов (px)" (в Figma это параметр fix). Размер шрифта, как правило, тоже константа. Если он меняется - то это новая компонента.
Мы задаем высоту кнопок и шрифта постоянной, чтобы унифицировать дизайн.
А вот ширина кнопки - часто динамическая величина. Ширина кнопки, как правило, задается "100%" ( в Figma - Fill) . А ее размер ограничивается с помощью внешнего контейнера. Использование внешнего контейнера позволяет легко управлять ее размером в каждом кейсе изменения ширины. Не нужно лишний раз прописывать настройки для каждой отдельной кнопки.
На ширину влияет много факторов: длина текста, ширина экрана или блока, респонсив. Именно поэтому мы делаем ее динамической.
совсем необязательно должен быть новый компонент, в рамках одного родителя можно задать размерный ряд и доп параметры с помощью тех же самых вариантов и свойств
Благодарю, полезно!
💜
Вагон клиентов вам
😘