Виджет Button позволяет открывать любой контент или переходить к другим сценам по нажатию на кнопку. Благодаря этому виджету можно создавать многоуровневые интерактивные сценарии.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5b163d07-c175-4202-9c37-af301e91c131/button-example.gif

Чтобы добавить виджет Button нажмите на иконку Button в панели инструментов или горячую клавишу B.

Целевой контент

Целевой контент — это контент или сцена, которая должна открыться по нажатию на Button. Целевой контент является обязательным для работы виджета.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d5e2a379-642e-44b6-adf0-928a2435bebc/button_target-content.gif

Чтобы добавить целевой контент, кликните по кнопке Add content и выберите нужный контент или сцену.

Idle timeout

Время бездействия — это время, после которого контент или сцена к которой мы перешли по нажатию на Button должны закрыться, вернув макет в исходное состояние. Чтобы изменить Idle timeout, введите нужное значение в одноименное поле (время указывается в формате hh:mm:ss).

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a225f9c-3ac6-4640-a166-bf6002665644/Untitled.png

<aside> 💡 Idle timeout считается с момента последнего взаимодействия с экраном. Например, если по нажатию на Button открывается веб-страница, время указанное в Idle timeout начнет свой отсчет с момента последнего прикосновения пользователя к touch-экрану.

</aside>

Основные настройки

Основные настройки отвечают за внешний вид кнопки.

  1. Whole layer. Если активировать переключатель Whole layer, кнопка станет невидимой, а область нажатия на неё распространится на весь слой, к которому принадлежит данная кнопка. При этом все настройки, отвечающие за внешний вид кнопки будут скрыты.

    Untitled

  2. Load my image. Позволяет использовать в качестве кнопки собственную графику (jpg, png).

    <aside> 💡 Размер графики будет изменятся с сохранением пропорций. Если вы не хотите сохранять оригинальные пропорции, кликните по иконке замка (keep original ratio) между полями ввода ширины и высоты.

    </aside>

  3. Button size. Параметр, отвечающий за размер кнопки и радиус скругления углов. W — ширина, H — высота, R — радиус скругления

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/25d787f3-8109-417b-a701-3b6145056309/Untitled.png

  4. Position. Настройка, отвечающая за расположение кнопки на экране, относительно осей X и Y.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e3b78968-1cac-4a8e-897c-da09501e494d/Untitled.png

  5. Color. Группа настроек, позволяющая задать пользовательский цвет для текста и фона кнопки. Параметр O (Opacity) отвечает за прозрачность.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/12fbce83-656c-4227-8f5f-723756587dc5/Untitled.png

  6. Button text & Text size. Текст кнопки можно изменить как в панели настроек, так и в рабочей области, дважды кликнув по текстовому полю. Размер текста задается в процентах, относительно размера самой кнопки (если нажать на иконку справа от поля ввода размера текста, текст автоматически примет максимально возможное значение).

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5dac3ebf-ae5f-43dd-a4ad-c9f8877bf45b/button_text-settings.gif

Область открытия целевого контента