Общие настройки компонентов

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

Название компонента

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

В общем, имеет смысл выбрать между регистром Snake- and Camel-Case. Регистр Kebab не рекомендуется, так как "-" между словами может интерпретироваться в Javascript как отрицательная операция в крайних случаях.

Этикетка

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

Ориентация

Подсказка

Интернационализация

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

Для надписей и всплывающих подсказок Javascript-выражение Handlebar можно использовать для чтения из регистра перевода (JSON).

// reading the User Language from Browser 
{{navigator.language || navigator.userLanguage}}

// a Translation Register as JSON
{
	"Name": [{
	"en": "Name"
	}, 
    {
        "ru": "Имя"
    },
    {
	"fr": "Nom"
	}]
}

// dynamically reading from the Translation Register JSON for the label
{{translations.value.Name.find(item => item.hasOwnProperty(userLanguage.value))[userLanguage.value]}}

Расположение

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

• Ориентация (выравнивание слева по центру справа) (где применимо)

• Вертикальное пространство (фиксированное, автоматическое) (где применимо)

• Значки префиксов и суффиксов (там, где это применимо)

Отключить и скрыть

Большинство компонентов могут быть скрыты и/или отключены динамически с помощью Javascript-выражения Handlebar.

Отключить компоненты

Скрыть компоненты

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

Вертикальное пространство скрытых компонентов

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

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

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

Обработчики событий

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

Типы событий взаимодействия с пользователем

• Изменить (при изменении введенных пользователем данных)

• Фокус (когда пользователь указывает на компонент)

• Размытие (когда пользователь покидает компонент)

• Отправить (когда пользователь отправляет форму, к которой принадлежит компонент)

• Щелчок (когда нажимается кнопка, подобная компоненту)

• Открывать / закрывать (для разборных компонентов)

• Переключить вкладку (для контейнеров с вкладками)

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

Действия по событиям

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

• Выполнить запрос

• Управлять компонентом

• Запустить Javascript

• Задать временное состояние

• Перейти в приложение

• Показать уведомление

• Перейти по URL

• Скопировать в буфер обмена

• Экспортировать данные

Узнать больше об обработчиках событий.

Порядок действий по событию

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

Стиль

Компоненты поддерживают различные Настройки стиля, такие как цвета, границы и фон.