Макет экрана. Кнопка

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

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

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

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

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

Idle timeout

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

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

</aside>

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

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

Whole layer. Если активировать переключатель Whole layer, кнопка станет невидимой, а область нажатия на неё распространится на весь слой, к которому принадлежит данная кнопка. При этом все настройки, отвечающие за внешний вид кнопки будут скрыты.
Load my image. Позволяет использовать в качестве кнопки собственную графику (jpg, png).
- Чтобы установить собственное изображение для кнопки, активируйте переключатель Load my image и нажмите на кнопку Upload your image.
- В открывшейся дополнительной панели выберите нужную графику или загрузите новую (кнопка Upload)
<video fetchpriority="high" style="width: 100%; height: auto; display: block;" autoplay="" loop="" muted="" playsinline="" data-src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-05.mp4" src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-05.mp4"></video>

<video fetchpriority="high" style="width: 100%; height: auto; display: block;" autoplay="" loop="" muted="" playsinline="" data-src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-05.mp4" src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-05.mp4"></video>

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

</aside>
Далее идут настройки размеров, позиционирования, радиуса скруглений углов и вращения кнопки вокруг собственной оси.

kb-screen-layout-button-06.avif
Color. Группа настроек, позволяющая задать пользовательский цвет для текста и фона кнопки. Параметр O (Opacity) отвечает за прозрачность.
Button text & Text size. Текст кнопки можно изменить как в панели настроек, так и в рабочей области, дважды кликнув по текстовому полю. Размер текста задается в процентах (если нажать на иконку справа от поля ввода размера текста, текст автоматически примет максимально возможное значение).

<video fetchpriority="high" style="width: 100%; height: auto; display: block;" autoplay="" loop="" muted="" playsinline="" data-src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-08.mp4" src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-08.mp4"></video>

<video fetchpriority="high" style="width: 100%; height: auto; display: block;" autoplay="" loop="" muted="" playsinline="" data-src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-08.mp4" src="https://storage.lookit.hk/landing/media/kb-screen-layout-button-08.mp4"></video>

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

По умолчанию целевой контент открывается на весь экран. Но, область открытия можно изменить, например, чтобы контент открывался не на весь экран, а в указанном слое.