Компоненты

Компонент — переиспользуемый блок интерфейса. Собранный один раз, он вставляется куда угодно, а правка компонента расходится по всем местам, где он используется.

Возьмём экран настроек со строками «Уведомления», «Приватность», «Аккаунт». Раскладка у всех одинаковая: иконка, текст и действие — переключатель или стрелка. Вместо трёх отдельных строк делают один компонент Settings Item и вставляют его трижды с разным содержимым.

Как создать компонент

Выделите готовый блок на холсте, нажмите Create Component в правой панели, задайте имя и отметьте параметры, которые нужно вынести наружу: текст, картинку, иконку. Компонент откроется в Component Studio.

В Component Studio параметры связываются с элементами: выберите элемент и укажите в правой панели, какому параметру соответствует его текст или изображение. Новые параметры добавляются там же. Благодаря этому каждый экземпляр компонента показывает своё содержимое, оставаясь единым по структуре и оформлению.

Варианты

Вариант — другая версия того же компонента: меняется оформление, но новый компонент заводить не нужно. У кнопки, например, бывают варианты Filled и Outlined.

Откройте компонент и нажмите Add variant. Появится новый вариант — выберите его и поменяйте оформление: рамки, отступы, цвета. Если нужна ещё одна ось различий, нажмите + Add variant снова.

Переключатели

Переключатель задаёт два состояния одного компонента: включено и выключено, выбрано и не выбрано.

Откройте компонент и нажмите Add toggle в панели вариантов. Появятся два состояния — true и false. Выберите каждое и настройте, как компонент должен выглядеть в этом состоянии.

Выражение has

Выражение has включает и выключает что-либо в зависимости от того, передан параметр или нет. Оно возвращает true, если у параметра есть значение, и false, если нет. Это избавляет от лишних булевых параметров:

• показывать картинку, только если задан image_url;
• показывать подзаголовок, только если задан subtitle;
• показывать строку со временем, только если задано time.

Скажем, у карточки авиабилета есть необязательная картинка справа. Вместо пары image_url и show_image достаточно одного image_url: свяжите свойство Visible с has(image_url). Передали картинку — карточка покажет её, не передали — останется только текст.