02 Элементы

Элементы - это то, что вы рисуете на страницах. Они отображают изображения, текст и другую инофрмацию, а также позволяют пользователям взаимодействовать с вашим приложением. У элементов есть свойства, которыми можно управлять в Редакторе свойств в редакторе Bubble. Элементы разделяются на три категории:

Визуальные элементы: Используются для отображения информации и запуска процессов при взаимодействии с ними пользователей, обычно это осуществляется по клику.
Контейнеры: Элементы, которые содержат другие элементы.
Поля ввода: Элементы, в которые пользователи вводят информацию.

Элементы являются либо частью библиотеки ядра Bubble, либо добавляются с помощью плагинов.

Главные понятия (General Concepts)

Адаптивное отображение (Responsive rendering)

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

Включить движок адаптивной отрисовки страницы (_Enable responsive page rendering engine)_

Страница может использовать либо адаптивный движок либо традиционный дизайн с фиксированной шириной и выравниванием по центру. Это задается на уровне страницы. Поставьте флажок, если хотите сделать страницу адаптивной.

Задать фиксированную ширину элемента (_Make this element fixed-width)_

Поставьте флажок, если хотите, чтобы элемент сохранял свои размеры при изменении размеров страницы. Это эквивалентно сохранению размеров страницы, если применено к элементу "Страница".

Минимальная ширина (_Minimum width) (% от текущей ширины)_

При сужении страницы адаптивный движок сужает и сами элементы. Для того, чтобы задать минимальную ширину, введите значение здесь. Оно должно быть меньше 100%.

Ограничить максимальную ширину при растягивании страницы (_Apply a max width when the page is stretched)_

Если вы хотите ограничить ширину элемента при расширении страницы, поставьте флажок здесь.

Максимальная ширина (_Maximum width) (% от текущей ширины)_

При расширении страницы адаптивный движок расширяет и сами элементы. Для того, чтобы задать максимальную ширину, введите значение здесь. Оно должно быть больше 100%.

Убрать отступы, если ширина контейнера ≤ (_Collapse margins when container width ≤)_

Если ширина контейнера, во многих случаях страницы, сжимается до этого значения, левые и правые отступы удаляются, что прижимает элементы к краям страницы. Эту функцию полезно использовать на мобильных экранах, когда полноэкранное изображение смотрится лучше.

Фиксированный отступ (_Fixed margin)_

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

Обратите внимание: Это применяется к первому элементу в данном блоке, а не к выбранному элементу.

Переместить на предыдущую строку при растягивании страницы (_Wrap to previous line if the page is stretched)_

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

Обратите внимание: Это применяется к первому элементу в блоке, а не к выбранному элементу.

Сохранять пропорции элементов (_Keep element proportions)_

Поставьте флажок здесь, если хотите, чтобы высота изменялась в соответствии с шириной, тем самым сохраняя пропорции. Это особенно нужно для карт и изображений.

Добавить правило скрытия (_Add hiding rule)_

Кликните здесь, чтобы задать порог, при котором элемент будет скрываться. Выберите > или <= и введите число. Если ширина экрана пересекает порог, элемент скрывается.

Режим отладки (_Debug mode)_

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

Режим приостановки отрисовки (_Paused rendering mode)_

Когда данный режим активен адаптивный движок не реагирует на редактирование свойств адаптивности элементов, что может быть полезным при работе со сложными страницами. Убрав флажок вы запустите новую отрисовку.

Условное форматирование (Conditional Formatting)

Вы можете управлять поведением и внешним видом элементов в зависимости от определенных обстоятельств. Задайте эти условия и свойства, на которые эти условия влияют, в окне Редактора Свойств (Property Editor) в разделе Условное форматирование (Conditional Formatting). Состояния применяются в том порядке, в котором они заданы. Если выполняются условия для двух состояний, изменяющих одно и то же свойство, будет применено то, что ниже по списку.

Когда (When)

Данное условие определяет, когда должно изменяться свойство. Условие может касаться как самого элемента, например, когда на кнопку наведен курсор или совершен клик, так и более сложные выражения, такие как "когда пользователь в системе". Задавайте эти условия по одному. Так как условие должно возвращать значение "да или нет", оно будет красным до тех пор, пока условие не будет корректным.

Выберите изменяемое при выполнении условия свойство (Select a property to change when true)

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

Сдвинуть вверх (Move up)

Клик по этой кнопке сдвигает условие вверх на одну строку. Условие, находившееся ранее над текущим условием будет смещено на одну строчку вниз.

Сдвинуть вниз (Move down)

Клик по этой кнопке сдвигает условие вниз на одну строку. Условие, находившееся ранее под текущим условием будет смещено на одну строчку вверх.

Удалить условие (Remove condition)

Удаляет условие для текущего элемента

Вкл/Выкл (On/Off)

Данная кнопка выключает или включает условие. По умолчанию отключена.

Переходы (Transitions)

Продолжительность (Duration)

Длительность перехода в миллисекундах.

Выпадающее меню времени перехода (Transition timing dropdown)

Данный параметр определяет как вычисляются средние значения перехода. Можно выбрать из нескольких кривых распределения.

Выбрать свойство, чтобы задать новый переход (Select a property to define a new transition)

Выберите из выпадающего меню свойство, к которому будет применяться переход.

Удалить переход (Remove the transition)

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

Состояния (States)

Состояния элемента - это ситуации, в которых может оказаться элемент, например, на элемент наведен курсор или элемент видим на странице.

... наведена мышь (is hovered)

Это состояние, когда пользователь помещает курсор мыши непосредственно над элементом.

... мышь не наведена (isn't hovered)

Это состояние, когда пользователь не наводит мышь на элемент

... нажат (is pressed) {#Elements.GeneralConcepts.States.is_pressed}

Это состояние, когда пользователь кликает по элементу мышью или нажимает на него в сенсорном устройстве.

... не нажат (isn't pressed)

Это состояние, когда пользователь не кликает по элементу мышью и не нажимает на него в сенсорном устройстве.

... выделен (is focused)

Это состояние, при котором поле ввода выделено и пользователь может печатать в нем.

... не выделен (isn't focused)

Это состояние, при котором поле ввода не выделено и пользователь не может печатать в нем.

... видим (is visible) {#Elements.GeneralConcepts.States.i_visible}

Это состояние, при котором элемент является видимым

... невидим (isn't visible)

Это состояние, при котором элемент является невидимым

... значение корректно (is valid)

Это состояние, при котором в поле ввода корректное содержимое, и, следовательно, данное поле ввода может использоваться в процессах в режиме работы приложения. Обычно вы будете пользоваться состоянием "значение некорректно" для изменения стиля элемента.

... значение некорректно (isn't valid)

Данное состояние возникает, когда у поля ввода некорректное содержимое. Это может происходить в следующих случаях:

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

В таком случае, задействованные процессы не смогут быть запущены до тех пор, пока значение не будет корректным.

... элемент некликабелен (isn't clickable)

Это состояние, при котором на элемент нельзя кликнуть. Это может происходить в случаях, когда:

В Редакторе принудительно установлено, что по элементу нельзя кликнуть.
Некорректны данные, относящиеся к кнопке, которая запускает рабочий процесс.

В таком случае будет применяться не только условное форматирование, но и процесс нельзя будет запустить до того, как кнопка станет кликабельной.

... значение элемента (поля ввода) (`s value (input))

Это содержимое поля ввода. Обычно это простой тип, но может также быть более сложным, используя выпадающие списки или адрес.

... нет отметки (checkbox) (isn't checked)

Это состояние, когда в чекбоксе нет отметки.

... введенный текст (в поле поиска) ('s typed text (search box input))

Возвращает значение, введенное пользователем в поле поиска, если оно не совпадает ни с одним значением динамического списка. Имеет текстовый тип.

... содержимое (контейнера) ('s content (container))

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

... список (в повторяющей группе) (`s list (repeating group))

Данное состояние возвращает содержимое повторяющей группы. Типом данного состояния является список содержимого повторяющей группы. Вы можете управлять значением данного состояния с помощью параметра "источник данных" в элементе или действия рабочего процесса "Display list in a repeating group"/"Отобразить список в повторяющей группе".

... загружается (повторяющая группа, загрузчик изображения) (is loading (repeating group, picture uploader))

Данное состояние имеет значение "истина", в том случае, если в повторяющую группу загружается новый список. Это позволяет вам изменять стиль других элементов, чтобы регулировать внешний вид страницы при загрузке списка. Используйте это состояние для того, чтобы узнать, что загрузчик файлов или изображений находится в процессе загрузки файла.

... текущий маркер (карта) (`s current marker (map))

Данное состояние возвращает значение маркера, по которому пользователь кликнул на карте. Типом содержимого данного состояния является тип "карта".

... адрес центра ('s center address)

Данное состояние возвращает адрес текущего центра карты. Оно обновляется в тот момент, когда пользователь заканчивает перетаскивать карту.

... текущее событие (календарь) (`s current event (calendar))

Данное состояние возвращает значение события, по которому пользователь кликнул в календаре. Его типом является тип содержимого календаря.

... события текущего дня (календарь) ('s current day's events (calendar))

Данное состояние возвращает список события дня календаря, по которому кликнул пользователь. Его типом является список типа содержимого календаря.

... текущий день (календарь) ('s current day (calendar))

Данное состояние возвращает дату дня, по которому кликнул пользователь. Тип - дата.

... текущий слайд (слайдшоу, tinder) ('s current slide (slideshow, tinder))

Данное состояние возвращает текущее изображение, которое показывают эти два элемента.

... текущая опция (листаемое меню) ('s current option (slidable menu))

Данное состояние возвращает опцию, по которой пользователь кликнул в меню. Тип - текст.

... перенесен (is dragged)

Данное состояние принимает значение "истина", когда группу "drag/drop"/"перетаскиваемую" куда-то переносят.

... проносится над (is dragged over)

Данное состояние принимает значение "истина", когда зону сбрасывания (drop) накрывают перетаскиваемой группой.

Пользовательские состояния (Custom states)

Вы можете задать пользовательские состояния для элемента по аналогии с встроенными состояниями "наведена мышь", "нажат" или "активен". Эти состояния могут в последствии использоваться в разделе "Conditional"/"Условия" в Редакторе свойств для изменения того, как элемент отображается или ведет себя, когда это состояние принимает определенное значение. Изменение состояния происходит с помощью действия "Set state"/"Установить состояние" внутри рабочего процесса.

Обычно это используется для создания в группе системы вкладок. Вы можете создать в контейнере состояние "current tab"/"текущая вкладка", и менять его значение, когда пользователь кликает по различным кнопкам вкладок. Используя Условное форматирование вы можете отображать или скрывать элементы в зависимости от значения текущей вкладки группы. Пользовательские состояния полезны для сохранения информации на уровне элемента без её записи в базу данных.

Изменение типа родительского элемента (Changing the parent element's type)

Данная настройка изменяет тип содержимого родительского элемента на лету. Тип содержимого определяет, какой тип сущностей должна ожидать группа, чтобы вы могли ссылаться на него при редактировании приложения. Например, группа может принимать пользователя, который не обязательно является текущим пользователем, а вы потом можете добавить текстовый элемент, в котором будете отображать "Parent group's user's email"/"Email пользователя родительской группы".

Элемент отображается при загрузке (This element is visible on page load)

Поставьте здесь отметку, чтобы элемент по умолчанию был видимым. Данный checkbox делает элемент видимым при каждой загрузке или перезагрузке страницы. Вы можете изменять видимость элемента, основываясь на условиях в разделе Conditional в Редакторе свойств или с помощью действия отобразить/скрыть элемент внутри рабочего процесса.

Для того, чтобы быстро найти скрытые элементы, кликните в checkbox "Отображать только скрываемые" на панели в Дереве элементов. Клик по имени отобразит или скроет элемент только во время редактирования. Как и другие свойства, данная настройка может быть переназначена условием на уровне элемента или с помощью действия отобразить/скрыть внутри рабочего процесса. Действия имеют приоритет над условиями, а условия над значениями по умолчанию.

Заменить элемент (Replace element)

Кликните по этой кнопке, чтобы заменить элемент элементом другого типа. Например, измените элемент с чекбокса на переключатель или с группы на всплывающее окно.

Обратите внимание: Данная операция может привести к несоответствию типов, поэтому обратитесь в инспектор ошибок, чтобы удостовериться в том, что не возникло ошибок. При необходимости отмените изменения.

Стиль (Style)

Выберите стиль из данного выпадающего меню, чтобы применить к выбранному элемента. Стили задаются во вкладке Styles (Стили) и могут применяться к более, чем одному элементу. Когда изменяется стиль, автоматически изменяются все элементы с этим стилем. Использование стилей ускоряет редактирование приложения и гарантирует однородность дизайна.

Удалить стиль (Remove style)

Клик по данной кнопке удаляет стиль из выбранного элемента. Удаляется привязка к стилю, но свойства стиля остаются примененными к элементу.

Редактировать стиль (Edit style)

Клик по данной кнопке открывает вкладку стилей и выбирает стиль текущего элемента.

Выбрать родителя (Select parent)

Выберите из выпадающего меню элемент, который будет содержать в себе текущий элемент. Это уместно, когда элемент содержится внутри группы с одинаковыми размерами.

Показать в дереве элементов (Reveal in Elements Tree)

Клик по данной кнопке отобразит где находится элемент в Дереве элементов на Панели.

Заблокировать элемент (не переносится в редакторе) (Lock this element (not draggable in editor))

Когда здесь стоит отметка, элемент нельзя перетащить в Редакторе Bubble. Это полезно при работе с большими страницами. Не влияет на режим работы.

Задать ID/ID Attribute (для продвинутых) (ID Attribute)

Если вы активируете настройку "Expose the option to add an ID attribute to HTML elements"/"Открыть настройку для добавления ID к элементам HTML" во вкладке Настройки, вы можете назначить уникальный ID для некоторых элементов на странице. Этот ID будет применяться в режиме работы к внешнему тэгу div данного элемента. Эта функция для опытных пользователей.

Предупреждение: Bubble не гарантирует, что внутренняя структура div-тэгов со временем будет оставаться неизменной. Что можно гарантировать, так это то, что ID будет назначен для внешнего элемента. Имейте это в виду при использовании ID.

Элемент Страница (Page)

Элемент Страница - основополагающий элемент, который содержит в себе все другие элементы.

Тип содержимого (Type of content)

Данное свойство определяет тип сущности, которую страница ожидает получить на вход. Будучи установленной, вы можете обращаться к ней (Current page thing/Сущность текущей страницы) в Редакторе Bubble. Типичный случай использования данной функции - создание страницы профиля. Установить тип содержимого "Пользователь", тогда в каждом элементе страницы вы сможете обратиться к Current user`s email, Current user`s picture и т.д. Если вы установили для страницы тип содержимого, все ссылки, указывающие на эту страницу должны определять сущность, которую нужно передать на страницу.

Поле для семантической (читаемой) URL (Field for readable URL)

Страница представляет сущность типа, который определяется Типом содержимого. URL обычно выглядят как example.com/page/1449154312665x293260311940684900. Для того, чтобы эти URL можно было прочитать, выберите поле, в котором можно задать то, что будет отображено в URL. Обычно это короткое текстовое поле, похожее на имя или заголовок. Например, поле "location" со значением "work" станет URL example.com/page/work-1449154312665x293260311940684900.

Заголовок страницы (Page title)

Данное свойство определяет, как страница будет отображаться в браузере. Оно может быть динамическим, если вы воспользуетесь кнопкой "Insert dynamic data"/"Вставить динамические данные".

Данная страница является нативным приложением (This page is a native app)

Поставьте здесь отметку, чтобы создать нативное приложение и если вы хотите чтобы данная страница была приложением, размещенным в магазинах приложений. Клик по данному чекбоксу отобразит всплывающее окно, в котором отобразятся подсказки для создания мобильного приложения.

Обратите внимание: данная функция находится на бета-тестировании.

Имя нативного приложения (Native app name)

Введите имя приложения, которое будет отображаться на домашнем экране телефона пользователя.

Мобильная версия (Mobile version)

Для того, чтобы у вас был специальный дизайн под мобильные устройства, выберите страницу в данном выпадающем меню. Так как URL останется прежним, пользователь не заметит.

Предустановленная ширина страницы (Preset page width)

Выберите предустановленную ширину страницы из выпадающего меню, чтобы страница подходила под целевое устройство, например, ноутбук, мобильный или планшет. Изменение ширины страницы или высоты в Редакторе Bubble изменит данную настройку на "Пользовательская".

Заголовок (Description) (для SEO/FB)

Введите заголовок, который будут подтягивать соцсети при просмотре вашей страницы. В Facebook, например, данный заголовок отображается в выдаче. Он должен быть примерно 50-60 символов, включая пробелы. Если оставить пустым, будет использоваться заголовок, указанный в разделе "SEO и метатэги".

Описание (для SEO/FB)

Введите мета описание, которое будут подтягивать поисковые роботы Goggle при заходе на вашу страницу. Это описание отображается в поисковой выдаче Google или Bing. Оно должно быть короче 160 символов, включая пробелы. Если оставить пустым, будет использоваться описание, указанное в разделе "SEO и метатэги".

Изображение (Image) (для FB)

Выберите динамическое изображение, которое будет показывать Facebook.

HTML Header страницы (Page HTML Header)

Введите HTML код, который будет включен в Header. Например, метрики Facebook и Google для отслеживания конверсии.

Предупреждение: Эта функция должна использоваться только опытными пользователями, т.к. может нарушить страницу.

Стиль фона (Background style)

В данном выпадающем меню вы можете выбрать стиль, который будет применен к фону. Вы можете выбрать из "без фона"/"none", "Сплошной цвет"/"Flat colot", "Градиент"/"Gradient", "Изображение"/"Image" или "Видео"/"Video".

Цвет фона (Background color)

Выберите цвет фона страницы

Стиль градиента (Gradient style)

В данном выпадающем меню вы можете выбрать либо линейный либо радиальный градиент.

Направление градиента (Gradient direction)

В данном выпадающем меню вы можете выбрать направление градиента.При выборе "Пользовательского" откроется поле выбора градуса, в котором можно задать направление в градусах.

Градус направления (Direction degrees)

Введите число от 0 до 360 для выбора направления градиента.

Форма градиента (Gradient shape)

Вы можете выбрать Эллипс (Ellipse) или Круг (Circle), чтобы задать форму градиента.

Основание градиента (Gradient base)

В данном выпадающем меню можно выбрать положение относительно экрана для определения основания градиента. Можно выбрать из "Ближняя сторона"/"Closest-side", "Ближний угол"/"Closest-corner", "Дальняя сторона"/"Farthest-side", "Дальний угол"/"Farthest-corner".

Центр градиента по оси X (X Center Position) (%)

Введите % смещения градиента относительно его основания по горизонтали. 50% даст центрирование градиента по горизонтали.

Центр градиента по оси Y (Y Center Position) (%)

Введите % смещения градиента относительно его основания по вертикали. 50% даст центрирование градиента по вертикали.

Начальный цвет (Starting color)

Выберите начальный цвет градиента.

Конечный цвет (Ending color)

Выберите конечный цвет градиента.

Промежуточный цвет (Intermediate color)

Выберите необязательный промежуточный цвет градиента. Если поле пустое, промежуточный цвет не будет установлен.

Фоновое изображение (Background image)

Загрузите или выберите динамическое изображение, которое будет использоваться в качестве фона.

Подсказка: Используйте изображение из нашей бесплатной библиотеки.

Центрировать изображение (Center the image)

Центрирует изображение при изменении размеров экрана.

Сделать изображение равным по ширине родительскому элемента (Make image as wide as parent element)

Если страница шире, чем выбранный элемент, изображение автоматически расширится до полного экрана

Повторять элемент по вертикали (Repeat the image vertically)

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

Повторять элемент по горизонтали (Repeat the image horizontally)

Повторять изображение по горизонтали, если изображение меньше, чем ширина страницы.

Цвет фона, если изображение отсутствует (Background color if empty)

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

Применить параллакс (Apply a parallax effect) (только для настольных компьютеров)

Поставьте здесь отметку, чтобы фоновое изображение скроллилось медленнее, чем элементы на странице. Это даст ощущение глубины.

Скорость параллакса (Parallax speed)

В данном выпадающем меню можно выбрать число, чтобы контролировать эффект глубины параллакса. При значении 0,0 изображение не будет скроллиться. При значении 1 изображение будет прокручиваться с той же скоростью, что и элементы.

Видео файл (Video file)

Загрузите mp4 файл или выберите видео, которое будет использоваться в качестве фона.

Изображение-заглушка (Fallback image)

На мобильных устройствах видео может не отображаться из-за ограничений использования данных. Загрузите изображение, которое будет использоваться в данном случае.

Воспроизводить видео без звука (Play video silent)

Поставьте отметку, чтобы видео отображалось без звука.

Полосы (Stripes) (не приветствуется)

Задайте полосы во всю ширину экрана

Текстовый Элемент (Text Element)

Текстовый элемент отображает статический или динамический текст. Также он может по клику запускать рабочий процесс.

Текст (Text)

Это содержимое, которое будет отображаться в текстовом элементе. Введите статический текст или используйте кнопку "Вставить динамические данные"/"Insert dynamic data", чтобы задать динамический текст. Если текст динамический, создайте выражение, которое во время работы приложения будет собираться по кусочкам. Одним из них, например, может быть "Имя текущего пользователя"/"Current user's first name".

Используйте RTF редакторы, чтобы форматировать части текста отдельно от основного стиля элемента. Для добавления такого содержимого, как ссылка, используйте bb-коды.

Отрезать содержимое, если элемент недостаточно высок (Cut off content if the element is not tall enough)

Если выбрано, текст текстового элемента будет обрезан и в конце текста добавится "..." Данная настройка применяется для адаптивного режима.

Сжать высоту элемента, если текст сокращается (Shrink the element height if the text gets shorter)

Если выбрано, высота текстового элемента будет подбираться в соответствии с текстом, например, при изменении размера шрифта, даже если новая высота будет меньше той, что изначально указана в редакторе.

Растягивать, чтобы соответствовать содержимому (Stretch to fit content) (неадаптивный режим)

Данная настройка автоматически изменяет размер текстового элемента, когда содержимое увеличивается. Элементы, расположенные ниже на странице автоматически сдвигаются вниз, чтобы создать больше пространства для увеличившегося текстового элемента.

Распознавать ссылки и email адреса (Recognize links and emails)

Если галочка стоит, то данная настройка будет автоматически конвертировать URL и email-ы из текста в кликабельные ссылки во время работы приложения.

Цвет ссылки (Link color)

Если для текстового элемента установлена настройка обнаружения ссылок и email-ов, вы можете по желанию выбрать цвет ссылок.

HTML тэг для этого элемента (HTML tag for this element) (SEO)

Поставив флажок "Отобразить типы тэгов для текстовых элементов"/"Expose the type of tags for text elements" в разделе "SEO и метатэги" во вкладке "Настройки"/"Settings" даст вам возможность выбрать HTML тэг, который будет применяться к этому элементу. Используйте данную настройку для SEO оптимизации.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Клик по данной кнопке создаст новый рабочий процесс, запускаемый текущим элементом. Тип события зависит от элемента и обычно является самым распространенным событием.

Например, кнопки будут создавать событие "Когда по данному элементу кликнули..."/"When this element is clicked...". Если рабочий процесс уже существует, он откроется во вкладке Процессы. Для того, чтобы создать новый тип события или создать второе событие, перейдите во вкладку Процессы и нажмите на кнопку "Нажмите здесь, чтобы добавить событие..."/"Click here to add an event..."

Данный элемент некликабелен (This element isn't clickable)

Если стоит флажок, элемент не сможет запустить рабочий процесс, а также при наведении мыши на элемент курсор не сменится на указатель. В дополнение к этому, элемент будет отображаться в соответствии с условным форматированием для состояние "некликабелен".

Эта функция может использоваться для того, чтобы пользователь не смог совершить следующее действие до тех пор, пока условие не выполнено. Например, мы можем отключить определенное действие до тех пор, пока пользователь не войдет в систему. См. "Данное поле не должно быть пустым"/"This input should not be empty" (!!!ЛНК!!!), что также может использоваться для предотвращения кликов пользователя.

Изображение (Image)

Элемент Изображение отображает статическую или динамическую картинку.

Источник изображения (Image source)

Здесь задается изображение, которое нужно отобразить. Кликните "Upload", чтобы загрузить файл. Размер изображения будет изменен согласно размерам элемента. Клик по кнопке "Найти бесплатные картинки"/"Search for free images" откроет всплывающее окно, в котором можно найти бесплатные изображения.

Для динамических изображений используйте блок "Динамическое изображение"/"Dynamic image" и кликните "Вставить динамические данные"/"Insert dynamic data". Затем создайте выражение, которое будет возвращать изображение во время работы. Например, "Картинка профиля текущего пользователя"/"Current user's profile picture".

Отрисовка во время работы (Run-mode rendering)

Данная настройка определяет то, как обрабатывать динамические изображения, если их размеры не попадают в размеры текущего элемента. Можно выбрать из:

"Растянуть"/"Stretch": Размеры изображения будут изменены, чтобы заполнить весь элемент.
"Изменить масштаб"/"Rescale": В элемент будут добавлены вертикальные или горизонтальные отступы, чтобы изображение оставалось внутри границ, но не искажалось. Для аватарок это наилучший вариант.
"Подобрать высоту элемента"/"Adjust element height": При сохранении пропорций, если изображение должно быть больше, чем исходный элемент, его высота будет изменена, а элементы, находящиеся ниже, автоматически сдвинутся вниз.

Инструмент для обрезки изображения (Cropping tool)

Кликните по данной кнопке, чтобы обрезать статическое изображение.

ALT тэг (ALT tag)

Для SEO оптимизации добавьте к изображению тэг ALT. С его помощью можно задать текст, который отобразится в случае ошибки загрузки изображения. Атрибут ALT предоставляет дополнительную информацию об изображении, если пользователь по каким-то причинам не может его увидеть. Например, из-за медленного соединения, ошибки в атрибуте src или если пользователь использует программы для слабовидящих.

Обратите внимание: Данная настройка доступна, если включен режим "Отобразить типы тэгов для текстовых элементов"/"Expose the type of tags for text elements" в разделе "SEO и метатэги" во вкладке "Настройки"/"Settings".

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Кнопка (Button)

Кнопка - это элемент, кликнув по которому пользователь может запустить рабочий процесс.

Текст (Text)

Текст - это содержимое, которое отображается внутри элемента Кнопка. Введите статический текст или используйте кнопку "Вставить динамические данные"/"Insert dynamic data", чтобы задать динамический текст. Если текст динамический, создайте выражение, которое во время работы приложения будет собираться по кусочкам. Одним из них, например, может быть "Имя текущего пользователя"/"Current user's first name".

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Ссылка (Link)

Ссылка - это специальный элемент, который перенаправляет пользователя на другую страницу внутри приложения или на другой сайт. У него такие же свойства, как у ссылок на веб странице, в том плане, что по ней можно кликнуть правой кнопкой мыши, открыть в новой вкладке, скопировать и т.д.

Отображать иконку вместо текста (Show an icon instead of text)

Поставьте флажок, чтобы вместо текста отобразить иконку. Выберите иконку из библиотеки Font Awesome.

Текст (Text)

Текст - это содержимое, которое отображается внутри элемента. Введите статический текст или используйте кнопку "Вставить динамические данные"/"Insert dynamic data", чтобы задать динамический текст. Если текст динамический, создайте выражение, которое во время работы приложения будет собираться по кусочкам. Одним из них, например, может быть "Имя текущего пользователя"/"Current user's first name".

Иконка (Icon)

Выберите иконку, которая будет использоваться для данной ссылки. Можно изменять цвет и размер иконки и помощью свойств цвет и размер.

Направление ссылки (Link destination)

В выпадающем меню выберите, на Внутреннюю страницу или на Внешнюю URL указывает ссылка. Внутренняя ссылка будет направлять пользователя на другую страницу в приложении. Внешняя URL направляет пользователя на другой сайт.

Целевая страница (Destination page)

Выберите, на какую страницу указывает ссылка.

Отправляемые данные (Data to send)

Задайте, какие данные должны посылаться на новую страницу. Эти данные должны соответствовать типу содержимого целевой страницы. Если вы создаете страницу профиля, типом содержимого которой является "Пользователь", передайте на эту страницу пользователя. Конструктор будет отмечен красным, пока тип данных не станет подходящим.

Целевая ссылка (Destination URL)

Введите адрес, по которому должна переходить ссылка. Для ввода динамического текста используйте кнопку "Ввести динамические данные".

Открыть в новой вкладке (Open in a new tab)

Поставьте флажок здесь, чтобы открыть ссылку в новой вкладке браузера. Используйте данную настройку, чтобы пользователи оставались в приложении.

Отправить больше параметров на страницу (Send more parameters to the page)

Используйте данный checkbox, чтобы послать на страницу дополнительные данные, которые не являются сущностью. Это может быть текст, число для поиска и т.д. Данная настройка задает последовательность пар "ключ-значение", которые нужно передать. На целевой странице их можно использовать с помощью источника данных "Получить данные из URL"/"Get data from page URL".

Дополнительные параметры (Additional parameters)

Введите пары "ключ-значение", которые нужно послать на целевую страницу.

Предупреждение: Из-за внутренней логики Bubble не используйте в качестве ключей "id", "debug_mode" или "resume".

Свернуть текст при изменении ширины (Wrap the text when the width changes)

Поставьте флажок, если хотите, чтобы ссылка была более, чем на одной строке, если ширина страницы уменьшается.

Иконка (Icon)

Данный элемент - способ использовать одну из бесплатных иконок библиотеки Font Awesome library.

Иконка (Icon)

Кликните по данной кнопке, чтобы открыть библиотеку и выбрать иконку. Для уточнения воспользуйтесь поиском.

Цвет иконки (Icon color)

Выберите цвет иконки.

Вращать иконку (Make the icon rotate)

Поставьте флажок, чтобы непрерывно вращать иконку.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Прямоугольник (Shape)

Данный элемент обычно используется в визуальных целях, но он также может и запускать рабочие процессы, когда пользователь по нему кликает.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Видео (Video)

Данный элемент отображает на странице проигрыватель YouTube или Vimeo. Это может быть статическое или динамическое изображение. Также после установки плагина доступны видео с Ziggeo.

Источник видео (Video source)

Выберите видеохостинг: YouTube или Vimeo. Также после установки плагина доступны видео с Ziggeo.

Обратите внимание: Свяжитесь с нами, если ваш видеохостинг не поддерживается.

ID видео (Video ID)

Введите ID видео, которое нужно запустить в проигрывателе. Обычно ID отображается в URL во время просмотра видео на YouTube или Vimeo. Также ID может быть динамическим.

Автоматически запускать видео при загрузке (Play the video automatically on load)

Если флажок установлен, видео автоматически начнет воспроизводиться при загрузке страницы.

Запускать заново при окончании (Replay video when over)

Циклически воспроизводить видео.

Цвет управляющей панели (Video control color)

Выберите цвет проигрывателя для Vimeo. YouTube не предоставляет такой функционал.

Токен аутентификации (Server authentication token)

Задайте токен аутентификации для доступа к видео с Ziggeo. Ziggeo поддерживается после установки плагина.

Google карты (Google Maps)

Данный элемент отображает один или несколько адресов на карте. Работает на основе Google карт.

Количество маркеров (Number of markers)

На карте может быть отображен один из вариантов:

Нет (None): в таком случае, на карте нет маркеров
Один (Single): Данный адрес находится в центре карты. Адрес может быть статическим или динамическим.
Список (List): На карте отображается список адресов в таком масштабе, чтобы отобразить весь список. В таком случае список загружается из базы данных

Тип маркеров (Type of markers)

Когда на карте отображается список динамических записей, нужно задать тип сущностей, которые будут отображены. Это могут быть пользователи, апартаменты и т.д.

Источник данных (Data source)

Задайте адрес, который будет отображен на карте. Если стоит настройка Один маркер, то он должен быть либо статической записью адреса, либо динамической записью типа geographic address. Когда стоит настройка Список, источником данных должен быть список сущностей типа geographic address. Конструктор будет помечен красным до тех пор, пока тип данных не станет подходящим. Обычно это результат поиска.

Поле адреса (Address field)

При задании динамического списка вы должны задать поле, в котором содержится адрес. Например, для сущности "Apartment" должно быть поле "Address". Типом данного поля должен быть geographic address.

Показывать окно с заголовком (Show title window)

В выпадающем меню можно выбрать из No (Нет), On click (По клику) и Always (Всегда), чтобы определить, когда показывается заголовок. Если выбрано No, заголовок никогда не показывается. Если On click, то заголовок отображается, если был совершен клик по маркеру. Если Always, то заголовок отображается всегда.

Подпись маркера (Marker caption)

При использовании окон с заголовком, задайте здесь отображаемый текст. При создании выражения вы можете обращаться к текущему маркеру. Это и есть маркер текущего окна

Автоматически закрывать окно, если по другому кликнули (Auto-close window when another is clicked on)

Когда установлен флажок, карта автоматически закроет все окна с заголовками перед тем, как отобразить новое, если пользователь кликнул по маркеру.

Тип карты (Map type)

В данной настройке задается тип карты, в соответствии с типами Google: Roadmap, Hybrid, Satellite и Terrain.

Стиль карты (Map style)

В данном выпадающем меню выберите визуальный стиль карты, чтобы создать пользовательский стиль. Влияет только на отображение.

Пользовательский стиль (Custom style) (JSON объект)

Здесь можно скопировать (или создать свой собственный!) стиль карты. Это должен быть JSON объект, с которым можно в дальнейшем работать. За примерами обратитесь на snazzymaps.com .

Разрешить зум и перенос (Allow zooming and dragging)

Когда настройка активна, пользователь может использовать зум и перетаскивать карту. Если неактивна карта будет вести себя как статичная.

Отключить зум при прокрутке (Disable zooming on scroll)

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

Установить центр и зум вручную (Set center and zoom manually)

При использовании списка маркеров, масштаб карты будет автоматически подобран так, чтобы отобразить все маркеры. Чтобы принудительно задать масштаб и центр поставьте здесь флажок.

Установить центр карты (Map centered on)

При использовании списка маркеров, центр карты будет автоматически подобран так, чтобы отобразить все маркеры, но вы можете принудительно задать центр с помощью данного поля. В случае с одним маркером центр карты располагается по данному адресу.

Начальный зум (Initial zoom)

Здесь задается начальный масштаб, отображаемый при загрузке карты.

Использовать пользовательскую иконку маркера (Use customized marker icon)

Данная настройка позволяет загрузить пользовательскую иконку вместо стандартной иконки Google.

Пользовательская иконка (Customized icon)

При использовании карты со списком маркеров, в выпадающем меню выберите из No (Нет), Upload Custom (Загрузить пользовательскую) и Data dependent (Зависящую от данных). Если выбрано No, пользовательская иконка не будет использована. Если выбрано Upload custom, вы сможете загрузить изображение, чтобы использовать в качестве иконки для маркеров. Если выбрано Data dependent, каждый маркер будет использовать уникальную иконку, которая должна храниться в базе данных приложения.

Пользовательская иконка (Customized icon)

Данное поле используется для загрузки пользовательского изображения, которое будет использоваться в качестве маркера.

Поле иконки (Icon field)

Если вы используете список маркеров и установили настройку Data dependent, чтобы получать маркер из базы данных, задайте поле, в котором содержится изображение. Тип данного поля должен быть "Image".

Предупреждение (Alert)

Alert отображает на странице временное сообщение в качестве предупреждения. Сообщение отображается с анимацией постепенного появлением и исчезания. Данный элемент отображается с помощью действие внутри рабочего процесса.

Текст (Text)

Текст - это содержимое, которое отображается внутри элемента Alert. Введите статический текст или используйте кнопку "Вставить динамические данные"/"Insert dynamic data", чтобы задать динамический текст. Если текст динамический, создайте выражение, которое во время работы приложения будет собираться по кусочкам. Одним из них, например, может быть "Имя текущего пользователя"/"Current user's first name". Данное содержимое может быть изменено непосредственно внутри действия, которое его отображает. В таком случае текст, заданный на уровне элемента, заменяется.

Расположить предупреждение в верхней части страницы (Position the alert at the top)

Поставьте флажок, чтобы предупреждение возникало в верхней части страницы на всю её ширину.

HTML элемент

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

HTML

Вставьте актуальный HTML код, который должен обрабатываться элементом. Если элемент содержит тэг sctipt, то он будет работать в Live, но в Development версии работать не будет. При необходимости измените содержимое HTML с помощью динамических данных, вставляя динамические значения с помощью кнопки "Insert dynamic data"/"Вставить динамические данные".

Отображать как iFrame (Display as an iFrame)

Поставьте флажок, если HTML должен работать как самостоятельная web страница. Обратитесь к сервису, который предоставил код, чтобы решить, можно ли использовать данную настройку.

Растянуть, чтобы вместить содержимое (Stretch to fit content)

Когда не используется iFrame, а эта настройка активна, размер HTML элемента будет автоматически изменяться, если содержимое длиннее, чем сам элемент. Элементы, находящиеся ниже HTML элемента будут автоматически сдвинуты вниз.

Создано на Bubble (Built on Bubble)

Данный элемент добавляет иконку или текст "Built without code on Bubble" (Создано без кода на Bubble). Клик по ней открывает домашнюю страницу Bubble в новой вкладке браузера. Хоть и необязательно добавлять данный элемент к вашему приложению, нам будет очень приятно, что вы распространяете Bubble. :)

Визуальный тип (Visual type)

В данном выпадающем меню вы можете выбрать Blue, Gray, White и Text. Выбрав цвет, вы отобразите логотип Bubble в этом цвете. Выбрав текст, вы отобразите вместо иконки фразу "Built without code on Bubble".

Добавить границу (Add a border)

Поставьте флажок, чтобы добавить границу вокруг логотипа или текста.

Цвет текста (Text color)

С помощью данного свойства можно настроить цвет текста.

Группа (Group)

Группы - это элементы, которые содержат в себе другие элементы. У групп два назначения. Первое - группа объединяет элементы с визуальной точки зрения, и все элементы группы двигаются вместе. Также у групп есть семантическое значение. В группу можно передавать данные, и все элементы внутри группы смогут обратиться к Parent group's thing (Сущности родительской группы). Например, вы можете "отобразить" пользователя внутри группы, и все элементы группы смогут отобразить "Parent group's user's email" (Email пользователя из родительской группы). Используйте этот функционал, если вам нужно, чтобы на некоторых участках страницы отображались элементы, относящиеся к динамической записи.

Тип содержимого (Type of content)

Здесь можно выбрать тип сущности, отображаемой в контейнере. Большинство элементов, обладающих этим свойством также имеют параметр "Data source" (Источник данных), который позволяет выбрать отображаемую сущность или список сущностей. Значение в источнике данных должно соответствовать выбранному типу содержимого.

Рассмотрим на примере карты с отмеченными отелями. Когда вы кликаете на маркер, появляется всплывающее окно с названием отеля. Типом содержимого будет "Hotel", а источником данных "Map's current marker"

Источник данных (Data source)

Задайте сущность или список сущностей, которые будут отображаться в контейнере. Например, в группах или всплывающих окнах можно отображать только одну сущность,. а в повторяющих группах отображается список сущностей.

Элементы-потомки могут получить доступ к полю Data source (Источник данных) от их предка. Если родительский элемент содержит список сущностей, потомок сможет получить доступ к отдельному элементу этого списка.

Наиболее распространенный сценарий для групп - отображать что-нибудь, например текущего пользователя, а затем, с помощью содержащихся в группе полей ввода, изменять параметры пользователя, такие как тексты и изображения, отражающие информацию о пользователе.

Тип содержимого определяет, какой тип сущности допускается указывать в поле Data source. Если тип сущности не соответствует полю Data source, от будет отмечен ошибкой, и вам нужно будет одно или другое поле, чтобы получилось соответствие.

Источник данных может находиться где угодно в Bubble. Например, это может быть результат поиска, пользовательский или встроенный источник данных или же это может быть динамическое выражение, зависящее от пользователя. Поле Data source будет обновлено при обновлении источника данных. Например, если результаты поиска изменяются из-за того, что пользователь изменил данные в ограничениях поиска, отображаемый список актоматически изменится. Для большей гибкости вы можете обновлять Data source с помощью вкладки Условного форматирования в Редакторе свойств.

Наконец, свойство Data source может изменяться под влиянием рабочих процессов. См. раздел Действия с элементами (!!!ЛНК!!!), чтобы узнать подробности. Изменения, внесенные действиями, перезаписывают всё, что вы задали в поле Data source или в условных состояниях до тех пор, пока вы не запустите действие reset, которое восстанавливает исходные настройки.

Свернуть высоту элемента, если он скрыт (Collapse this element's height when hidden)

По умолчанию, скрыв элемент вы оставите на странице пустое место, показав тем самым всё, что было под элементом. Тем не менее, при выборе данной настройки, элементы под скрытым элементом поднимаются наверх для того, чтобы заполнить пространство. См. раздел руководства "Создание адаптивных страниц", (!!!ЛНК!!!) чтобы получить больше информации.

Анимировать сворачивание (Animate the collapse operation)

Данная настройка доступна только тогда, когда выбрано "Collapse this element's height when hidden" (Свернуть высоту элемента, если он скрыт). По умолчанию, элементы сворачиваются и расширяются мгновенно, но данная настройка создает анимацию постепенного проявления/исчезания или скольжения вниз/вверх.

Стиль анимации (Animation style)

В данной настройке можно выбрать, будет анимироваться Проявление/Исчезание или Скольжение.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Повторяющая группа (Repeating Group)

Повторяющая группа отображает список сущностей, который получается либо из базы данных, либо по API. Сконструируйте первую ячейку, а остальные будут ей соответствовать.

Тип содержимого (Type of content)

Источник данных (Data source)

Это список сущностей, которые можно отобразить в группе. Может быть одним из:

Результат поиска, использующий "Do a search for"
Содержимое поля, чьим типом является список сущностей.
Результат API вызова, который можно получить с помощью "Get data from an external API"

После установки источника данных, в каждой ячейке будет отображаться одна сущность, а элементы внутри ячейки смогут обратится к сущности текущей ячейки"Current cell's thing" .

Стиль размещения (Layout style)

Здесь можно задать основные настройки размещения для повторяющей группы. Есть 5 возможных настроек:

Вертикальная прокрутка: Если пользователь прокручивает элемент вниз, добавляются новые ячейки, но элементы, расположенные под группой не сдвигаются вниз.
Расширяемая вертикальная прокрутка: По мере прокрутки элемент дорисовывает ячейки, что сдвигает вниз элементы, расположенные под группой. Так реализована лента новостей в Facebook.
Полный список: В элементе рисуется столько ячеек, сколько необходимо. Это не лучший вариант, если у вас длинный список.
Фиксированное количество ячеек: Отображает только заданное количество записей. Для навигации используются действия "Вперед/Назад" внутри рабочих процессов.
Горизонтальная прокрутка: Элемент добавляет ячейки, если пользователь прокручивает вправо. В данном режиме в повторяющей группе может быть только один ряд.

Ячейки сами по себе могут расширяться, если для содержимого установлена настройка "stretch to fit content"/"Растягиваться, чтобы вместить содержимое".

Строки (Rows)

Введите количество строк, которые будут отображаться в повторяющей группе. Данная настройка применяется, только если установлена настройка "фиксированное количество ячеек" (Fixed number of cells).

Столбцы (Columns)

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

Минимальная ширина ячейки для адаптивного дизайна (Cell minimum width for responsive) (в пикселях)

Если страница является адаптивной, задайте минимальный размер, который может принимать ширина ячейки при изменении размеров страницы. Если страница станет слишком узкой для того, чтобы все ячейки были такой ширины, повторяющая группа отобразит меньшее количество ячеек в каждом ряду.

Допустить более одного столбца при растягивании (Allow more than one column when stretched)

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

Стиль разделителя (Separator Style)

Выберите тип границы, которая отображается между ячейками. Можно выбрать None или стилизованных линий, таких как Solid (жирная), Dashed (прерывистая) и Double (двойная).

Ширина разделителя (Separator Width)

Введите ширину разделителя в пикселях. Нужно задать ширину разделителя, даже если установлена настройка None. В таком случае между ячейками будет пустой промежуток.

Цвет разделителя (Separator Color)

Выберите цвет разделителя

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Всплывающие окна невидимы для пользователя до тех пор, пока вы не отобразите их с помощью вкладки Процесс (Workflow).

По умолчанию всплывающее окно можно закрыть, нажав клавишу Esc. Чтобы отключить такое поведение и сделать всплывающее окно модальным, поставьте здесь флажок. В таком случае, закрыть окно будет можно только с помощью действия Hide Popup внутри рабочего процесса.

Выберите цвет фона при появлении всплывающего окна. По умолчанию устанавливается темный прозрачный слой.

Введите число большее 0, чтобы придать фону эффект размывки. Хоть это и может сделать дизайн более интересным, но это также повлияет на скорость отображения. Данная настройка на мобильных устройствах игнорируется из соображений производительности.

Плавающая группа (Floating Group)

Плавающие группы - это группы, которые скользят по экрану на одном месте относительно границ экрана. Они используются для того, чтобы закрепить элемент независимо от прокрутки страницы. Плавающие группы полезны для создания "шапок", кнопок "наверх" и т.д.

Тип содержимого (Type of content)

Источник данных (Data source)

Закрепить по вертикали относительно (Vertically float relative to)

Воспользовавшись данным выпадающим меню вы можете выбрать место, относительно которого будет вычисляться позиция плавающей группы. Доступные опции:

Верх (Top): Расстояние между верхним краем группы и верхней частью экрана пользователя остается неизменным несмотря на положение прокрутки страницы. Выставляется по умолчанию.
Низ (Bottom): Расстояние между нижним краем группы и нижней частью экрана пользователя остается неизменным несмотря на положение прокрутки страницы.
Оба (Both): Оба - верхнее и нежнее расстояние останутся неизменными. Если группа слишком мала, чтобы отобразить всё содержимое, появится полоса прокрутки.
Ничего (Nothing): Плавающая группа не будет скользить, т.е. будет вести себя как обычная группа.

Например, расстояние вычисляется как высота между верхним краем группы и верхом страницы Bubble. Затем отображается расстояние от данной плавающей группы до верха страницы.

Обратите внимание: Если вы разместите элемент высоко на странице и закрепите его относительно нижней границы экрана, элемент может оказаться "над" верхней частью экрана и, соответственно, перестанет отображаться.

Закрепить по горизонтали относительно (Horizontally float relative to) (не советуем)

Воспользовавшись данным выпадающим меню можно задать, чтобы элемент плавал, закрепившись за Правой (Right), Левой (Left) или Никакой (None) границей по горизонтали. Данная опция распространена не так сильно, как вертикальный вариант, но полезна, если вам нужно отображать элемент независимо от ширины страницы.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Связанная Группа (Group Focus)

Данная группа автоматически скрывается, когда пользователь кликает куда-либо вне данной группы. Располагается относительно другого элемента. Особенно полезна данная функция при создании выпадающих меню.

Элемент-якорь (Reference element)

Определяет элемент, относительно которого вычисляется положение группы.

Смещение сверху (Offset top)

Сдвигает группу на данное количество элементов вниз относительно элемента-якоря

Смещение слева (Offset left)

Сдвигает группу на данное количество элементов влево относительно элемента-якоря

Тип содержимого (Type of content)

Источник данных (Data source)

Свернуть высоту элемента, если он скрыт (Collapse this element's height when hidden)

Анимировать сворачивание (Animate the collapse operation)

Стиль анимации (Animation style)

В данной настройке можно выбрать, будет анимироваться Проявление/Исчезание или Скольжение.

Начать/редактировать рабочий процесс (Start/Edit workflow)

Данный элемент некликабелен (This element isn't clickable)

Общие настройки ввода (General input options)

Данные настройки являются общими у всех элементов ввода

Включить автоматическую привязку к сущности родительского элемента (Enable auto-binding on parent element's thing)

Автоматическая привязка редактирует сущность автоматически при изменении поля ввода без использования рабочих процессов. Поставьте здесь отметку, чтобы активировать данный функционал. Чтобы всё работало вам нужно, чтобы поле ввода находилось в группе или на странице, для которых установлен необходимый тип содержимого. Модифицироваться будет именно та сущность, которая была передана в родительскую группу или страницу. Также должны быть заданы соответствующие права доступа в разделе Конфиденциальность (Privacy) во вкладке Данные (Data).

Изменяемое поле (Field to modify)

Выберите поле, которое должно изменяться с данным полем ввода. Его тип должен быть совместим с полем ввода.

Отображать Alert при успехе (Show an alert on success)

Поставьте флажок, чтобы после успешного выполнения операции авто-привязки отображался элемент Alert.

Отображаемый Alert (Alert to show)

Выберите, какой Alert отображать.

Сообщение для Alert (Alert message)

Задайте сообщение, которое будет отображаться в Alert-е или воспользуйтесь текстом, заданным на уровне Alert-а.

Данное поле обязательно (This input should not be empty)

Поставьте флажок, если данное поле ввода является обязательным для работы рабочего процесса, использующего его содержимое. Другими словами, Bubble не допустит запуска рабочего процесса до тех пор, пока поле не будет заполнено. Используйте эту настройку, чтобы убедиться в том, что пользователь ввел всю необходимую информацию для запуска процесса. Когда поле пустое, а не должно быть таким, Bubble помечает его как неверное.

Отключить поле ввода (This input is disabled)

Поставьте флажок, чтобы пользователь не мог взаимодействовать с элементом. В таком случае, содержимое поля ввода будет доступно только для чтения.

Поле ввода (Input)

Данный элемент позволяет пользователям вводить текстовую информацию в одну строку. Полезно для ввода email или пароля.

Заглушка (Placeholder)

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

Начальное содержимое (Initial content)

В данном поле задается, каким должно быть содержимое поля перед изменением либо после сброса значения. Например, если пользователь изменяет свой email, начальное содержимое будет "Current user's email"(email текущего пользователя).

Формат содержимого (Content format)

В данном выпадающем меню выберите тип для поля ввода. Это важно по двум причинам:

Чтобы убедиться в том, что введенное значение корректно и не допустить запуск рабочих процессов в обратном случае. В таком случае, состояние поля становится "Isn't valid". Например, для того, чтобы поле соответствовало шаблону name@example.com
В некоторых случаях предлагается маска, чтобы визуально помочь пользователям с датами, паролями и т.д.

Можно выбрать один из вариантов:

"Text"/"Текст": простая последовательность символов или чисел.
"Email": Адрес электронной почты
"Password"/"Пароль": Последовательность символов, скрываемая при наборе
"Integer"/"Целое": Число без дробной части
"Decimal"/"Десятичное": Число с дробной частью
"Address"/"Адрес": Географический адрес. В данном случае адрес автоматически проверяется Google картами.
"US Phone"/"US телефон": Номер телефона в формате (xxx) yyy-zzzz
"Percentage"/"Процент": Число, представляемое как 12,35%, что равно 0,1235
"Currency"/"Валюта": Число с символом валюты в виде префикса
"Date"/"Дата": Дата в формате мм/дд/гггг
"Date-2"/"Дата_2": Дата в Европейском формате дд.мм.гггг
"Text (numbers only)"/"Текст (только числа)": Последовательность символов, типа ссылочного номера, которое интерпретируется как числовое значение.

Обратите внимание: из-за предиктивного ввода текста на Android устройствах, некоторые форматы содержимого, включающие в себя маски, работают несколько иначе. Это касается: US Phone, Percentage, Currency, Date, Date_2 и Text (numbers only). На этих устройствах пользователи могут вводить любые значения, а сравнение с маской происходит только после завершения ввода. Конечный результат получается тем же.

Символ валюты (Currency Symbol)

Если выбран тип Currency, выберите из выпадающего списка символ валюты, который будет использоваться в качестве префикса.

Всегда отображать дробную часть (Always show decimals)

Если выбран тип Currency, поставьте здесь флажок для отображения двух знаков после запятой.

Отображать разделитель разрядов (Show thousands separator)

Для целочисленного или дробного типа поля ввода по мере набора будут вставляться разделители разрядов.

Ограничить число символов (Limit the number of characters)

Поставьте флажок, чтобы пользователь не мог вводить длинные записи.

Максимальное число (Maximum number)

Введите максимально допустимое количество символов.

Установить интервал (min и max) Set a range (min and max)

Поставьте здесь флажок, чтобы ограничить числа, которые может вводить пользователь

Минимальное значение (Minimum Value)

Установите минимальное значение, которое может вводить пользователь. Сделайте его динамическим с помощью Конструктора выражений.

Максимальное значение (Maximum Value)

Установите максимальное значение, которое может вводить пользователь. Сделайте его динамическим с помощью Конструктора выражений.

Проверять пароль при наборе (Check the password while typing)

Если во вкладке Settings в разделе General задана парольная политика, то поставьте здесь флажок, чтобы проверять пароль на соответствие этой политике.

Для опытных: Это полезно только в том случае, если вы проверяете пароль на стороне сервера.

Многострочное поле ввода (MultiLineInput)

Многострочные поля ввода позволяют пользователю вводить текст в несколько строк.

Заглушка (Placeholder)

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

Начальное содержимое (Initial content)

В данном поле задается, каким должно быть содержимое поля перед изменением либо после сброса значения. Например, если пользователь изменяет свой email, начальное содержимое будет "Current user's bio"(биография текущего пользователя).

Ограничить число символов (Limit the number of characters)

Поставьте флажок, чтобы пользователь не мог вводить длинные записи.

Максимальное число (Maximum number)

Введите максимально допустимое количество символов.

Растягивать, чтобы вместить содержимое (Stretch to fit content)

Поставьте здесь флажок, чтобы размер элемента изменялся, чтобы

Флажок (Checkbox)

Отображает подписанный чекбокс

Подпись (Label)

Введите текст, который отображается рядом с чекбоксом. Клик по тексту эквивалентен клику по самому чекбоксу.

Состояние по умолчанию (Preset status)

Задайте начальное значение чекбокса. Может быть Checked (Отмеченным), Unchecked (Неотмеченным) и Dynamic (Динамическим).

Динамическое состояние (Dynamic status)

Данная настройка видна только в том случае, если предустановленно состояние Dynamic. Задание динамического значения да/нет определяет начальное состояние элемента.

Чекбокс должен быть отмечен (This checkbox should be checked)

Если данная настройка установлена, процесс, использующий содержимое чекбокса не запустится до тех пор, пока в нем не будет стоять отметка. Это бывает полезно, например, чтобы пользователи при регистрации приняли пользовательское соглашение.

Выпадающее меню отображает с помощью понятного пользователю интерфейса список вариантов. Варианты могут быть получены как из базы данных, так и жестко прописаны в редакторе Bubble в виде текстового списка.

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

Варианты выпадающего элемента могут быть либо статическими, либо динамическими из базы данных приложения. В данном выпадающем меню выберите Static для статических или Dynamic для динамических вариантов.

Это список вариантов, из которых будут выбирать пользователи. Вводите по одному варианту в строку и разделяйте их с помощью клавиши Enter.

Это тип сущностей, которые используются элементом, если в Choices style включена настройка Dynamic.

Задайте список сущностей, которые будут использоваться в качестве опций. Этот список должен соответствовать тому типу, который указан в поле Type of choices. Это должен быть либо результат поиска, либо содержимое поля, если оно является списком.

Задайте то, как отображать сущность в выпадающем меню. Например, для отображения пользователей в качестве подписи создайте выражение типа "Current option's first name Current option's last name"

Данное значение отображается в выпадающем меню по умолчанию. Оно должно быть того же типа, который указан в "Type of choices".

Поле поиска (Search Box)

Данный элемент осуществляет поиск по одному из динамических вариантов, получаемых с помощью автодополнения. Пользователь начинает набирать слово или адрес, а выпадающий список в реальном времени предлагает ему подходящие варианты.

Заглушка (Placeholder)

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

Стиль вариантов (Choices style)

Поле поиска отображает либо статический список текстов, таких как список стран, либо динамические данные из базы данных приложения, либо адреса из Google Places API. Выберите один из вариантов: Static choices, Dynamic choices или Geographic places.

Варианты (разделяются с помощью Enter) (Choices (press Enter between each option))

Задайте список вариантов (Define list of options)

Клик по данной кнопке откроет всплывающее окно поиска. Выпадающее меню поиска содержит динамический список записей, из которых пользователь может выбирать. Добавьте ограничения, чтобы сузить этот список.

Поле для поиска (Field to search)

При использовании динамического списка записей, здесь нужно задать поле, которое будет использоваться для поиска вариантов автодополнения. Например, для того, чтобы отобразить в поле поиска рестораны, задайте список вариантов (list of options) выражением Search for restaurants, а в качестве поля выберите Name.

Допускать записи вне списка (Allow entries not in list)

Поставьте отметку, если вы хотите разрешить пользователям вводить что-либо, чего нет в динамическом списке. К этому тексту можно обратиться с помощью выражения "Input's typed text".

Максимальное число записей (Maximum entries to show)

Измените максимальное количество записей, отображаемых в выпадающем списке. Длинные списки загружаются дольше.

Значение по умолчанию (Default value)

Переключатели (Radio Buttons)

Данный элемент отображает список кнопок, из которых пользователи могут выбрать только один вариант. Варианты можно получать либо из статического, либо из динамического списка.

Стиль вариантов (Choices style)

Варианты для переключателя могут быть либо статическими, либо динамическими из базы данных приложения. В данном выпадающем меню выберите Static для статических или Dynamic для динамических вариантов.

Варианты (разделяются с помощью Enter)

Тип вариантов (Type of choices)

Это тип сущностей, которые используются элементом.

Источник вариантов (Choices source)

Подпись (Option caption)

Задайте то, как отображать сущность в списке переключателя. Например, для отображения пользователей в качестве подписи создайте выражение типа "Current option's first name"

Значение по умолчанию (Default value)

Количество столбцов (Number of columns)

Введите число столбцов для кнопок. Ширина подписи будет автоматически подбираться так, чтобы вместить все столбцы в заданную ширину элемента.

Цвет из Bootstrap (Bootstrap color)

Выберите цвет для отображения выбранного варианта. Можно выбрать из библиотеки цветов Twitter Bootstrap: Black, Primary, Danger, Info, Warning и Success

Ползунок (Slider Input)

Данный элемент позволяет пользователю выбрать значение из числового диапазона с помощью перемещения ползунка. Элемент совместим с сенсорными экранами, поэтому будет работать на мобильных устройствах.

Минимальное значение (Min Value)

Введите минимальное значение диапазона

Максимальное значение (Max Value)

Введите максимальное значение диапазона

Шаг (Step)

Данное число - это разница между двумя соседними значениями ползунка.

Тип ползунка (Slider type)

У Простого ползунка одна "ручка" и такой ползунок возвращает одно число. Ползунок типа Диапазон имеет две "ручки" и возвращает два числа. "Ручка" - это то, что двигает пользователь для изменения значения ползунка.

Обратите внимание: Вторая "ручка" для типа Диапазон появится только в Живом режиме.

Начальное содержимое (Initial content)

Задайте начальное значение ползунка. Если содержимое динамическое, значение выражения должно быть числом.

Ориентация (Orientation)

Данный параметр определяет, расположен ползунок по горизонтали или вертикали.

Цвет границы (Border color)

Выберите цвет границы ползунка и ручки. Ручка - это то, что двигает пользователь для изменения значения ползунка.

Цвет фона (Background color)

Выберите цвет для фона элемента

Цвет ручки (Handle color)

Выберите цвет ручки. Ручка - это то, что двигает пользователь для изменения значения ползунка.

Цвет области интервала (Range area color)

При использовании типа Диапазон, с помощью данного параметра задается цвет между двумя ручками. Ручка - это то, что двигает пользователь для изменения значения ползунка.

Обратите внимание: Вторая "ручка" для типа Диапазон появится только в Живом режиме.

Выбор даты/времени (Date/Time Picker)

Данный элемент позволяет пользователям выбрать дату и (опционально) время на календаре. Значение, возвращаемое данным элементом имеет тип date и может использоваться в полях типа date.

Тип (Input type)

Выберите Date или Date & Time, если вам нужно, чтобы к дате добавилось время.

Значение по умолчанию (Initial content)

Задайте начальное значение даты. Оно должно иметь тип date и будет красным до тех пор, пока тип записи не будет корректным.

Настроить заглушку (Customize the input placeholder)

По умолчанию, элемент выбора времени и даты отображает заглушку в выбранной датой и форматом. Для настройки поставьте здесь флажок.

Обратите внимание: Данная настройка доступна только в режиме Даты.

Заглушка (Placeholder)

Введите заглушку для даты.

Формат даты (Date format)

В данном выпадающем меню выберите нужный формат даты.

Пользовательский формат (Custom format)

Если вам нужно использовать собственный формат данных, его можно настроить здесь.

Начинать неделю с понедельника (Start the week on Monday)

Поставьте флажок, если хотите, чтобы неделя начиналась с понедельника (Европейский стиль). По умолчанию, неделя начинается с Воскресенья.

Отображать выпадающее меню выбора месяца/года (Display dropdowns to pick month/year)

Поставьте галочку, чтобы пользователи могли быстро изменять время и год. Полезно для дат в прошлом, таких как дни рождения.

Интервал времени (Time interval)

Данный параметр определяет, сколько минут находится между двумя соседними вариантами.

Обратите внимание: данная настройка доступна только в режиме Даты.

Формат времени (Time format)

В данном выпадающем меню выберите нужный формат времени.

Минимальная дата (Minimum date)

Данное поле используется, чтобы пользователь не мог ввести день раньше указанного. Данное поле может быть динамическим, в таком случае выражение, его определяющее, должно иметь тип date.

Максимальная дата (Maximum date)

Данное поле используется, чтобы пользователь не мог ввести день позже указанного. Данное поле может быть динамическим, в таком случае выражение, его определяющее, должно иметь тип date.

Минимальный час (Minimum hour)

Данное поле используется, чтобы пользователь не мог ввести час раньше указанного. Данное поле может быть динамическим, в таком случае выражение, его определяющее, должно иметь тип number. Оно должно быть в 24 часовом формате, т.е. 17:26 для 5:26 PM

Максимальный час (Maximum hour)

Данное поле используется, чтобы пользователь не мог ввести час позже указанного. Данное поле может быть динамическим, в таком случае выражение, его определяющее, должно иметь тип number. Оно должно быть в 24 часовом формате, т.е. 17:26 для 5:26 PM

Загрузчик изображений (Picture Uploader)

Данный элемент позволяет пользователю загружать изображение. Когда он кликает по кнопке, открывается окно, где можно выбрать загружаемое изображение. На мобильных устройствах также доступна возможность сделать фото с помощью камеры. После загрузки изображения нажатие на кнопку позволяет его открыть.

Заглушка (Placeholder)

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

По умолчанию (Default)

В данном поле задается начальное содержимое загрузчика изображения. Оно может быть либо статическим, либо динамически подгружаемым из базы данных, например, "Current user's picture" (Изображение текущего пользователя)

Сделать поле закрытым (Make this file private)

По умолчанию загружаемое изображение видно всем, у кого есть ссылка на файл. Чтобы добавить загружаемым файлам дополнительный слой безопасности выберите данную настройку. Вам будет предложено выбрать сущность, к которой прикрепляется файл. Данный элемент может впоследствии использоваться для ограничения доступа с помощью правил конфиденциальности. См Конфиденциальность (!!!ЛНК!!!)

Прикрепить данный файл к (Attach this file to)

Данная настройка доступна, если включено Make this file private. Закрытые файлы, загружаемые с помощью элемента навсегда закрепляются за сущностью, которая потом будет использоваться для определения того, у кого есть доступ к файлу. Только пользователи, у которых есть права "View attached files" для этой сущности смогут просматривать файл. Перейдите в раздел Privacy (Конфиденциальность)(!!!ЛНК!!!), чтобы задать правила конфиденциальности, которые дают такие права. Если значение "Attach this file to"(Прикрепить данный файл к) пустое или такой сущности не существует, то файл будет доступен для всех, у кого есть ссылка, что эквивалентно тому, когда настройка "Make this file private" не выбрана.

Хранилище (Storage service)

По умолчанию, загружаемые файлы хранятся Bubble на серверах хостинга Amazon S3. Вы опционально можете выбрать другое файловое хранилище, добавив его с помощью плагина. На данный момент нами поддерживается один такой сервис, Box.

Путь к папке (Folder path)

Введите путь в вашем Box для загрузки файла. Путь - это последовательность имен папок, разделенных "/", например, "My Folder/My Subfolder". Bubble автоматически создает папки, если они не существуют, и для создания пути можно использовать динамические данные.

Ограничить перед загрузкой размер изображения (Limit image size before upload)

По умолчанию изображения загружаются в исходном размере. Если изображение большое, это может сделать загрузку медленной. Если изображение больше, чем 800 х 600 пикселей, поставьте галочку, чтобы привести его к этим размерам.

Загрузчик файлов (File Uploader)

Данный элемент позволяет загрузить файл. При клике на кнопку пользователю предлагается выбрать файл, который нужно загрузить на сервер. После загрузки файла в элементе отображается имя этого файла.

Заглушка (Placeholder)

Если элемент пустой, данный текст будет предлагать пользователям ввести какое-нибудь значение.

По умолчанию (Default)

В данном поле задается начальное содержимое загрузчика файлов. Оно может быть либо статическим, либо динамически подгружаемым из базы данных, например, "Current user's resume" (Изображение текущего пользователя)

Сделать поле закрытым (Make this file private)

По умолчанию загружаемые файлы видны всем, у кого есть ссылка на файл. Чтобы добавить загружаемым файлам дополнительный слой безопасности выберите данную настройку. Вам будет предложено выбрать сущность, к которой прикрепляется файл. Данный элемент может впоследствии использоваться для ограничения доступа с помощью правил конфиденциальности. См Конфиденциальность (!!!ЛНК!!!)

Прикрепить данный файл к (Attach this file to)

Хранилище (Storage service)

Путь к папке (Folder path)

Элемент многократного использования (Reusable Element)

Элемент многократного использования создает элемент наподобие группы, содержащий другие элементы. Данный элемент можно использовать более чем в одном месте. Это полезно в тех случаях, когда вы часто используете одни и те же элементы. Использование элементов многократного использования позволяет сделать приложение меньше, а также облегчить его редактирование.

Тип элемента (Type of element)

Элемент многократного использования может быть Группой, Всплывающим окном или Плавающей группой. В случае со всплывающим окном, элемент будет вести себя как всплывающее окно, т.е. будет модальным и при его отображении будет происходить затемнение фона.

Тип содержимого (Type of content)

Источник данных (Data source)

Удалить данный элемент многократного использования (Delete this reusable element)

Удаляет элемент многократного использования. Страницы, использующие данный элемент будут отображать заглушку "Удаленный элемент многократного использования".

Previous01 Интерфейс Баббл Next03 Основные свойства стилей

Last updated 3 years ago