Темы и стиль оформления

Хороший пользовательский интерфейс (UI) улучшает взаимодействие с пользователем (UX) и повышает вовлеченность пользователей. Вы можете настроить стиль каждого компонента в Apeekflow и использовать функцию темы для разработки интерфейса для каждого приложения или рабочей области. Такие функции, как настройка значков и подсказки, делают взаимодействие с приложением более удобным для пользователя.

Стили компонентов

Вы можете изменить стиль всех компонентов на вкладке Свойства.

Щелкните палитру цветов, чтобы выбрать цвет, или введите код цвета CSS в текстовое поле.

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

Темы

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

Создайте тему

Администраторы рабочей области имеют доступ к настройкам темы. На домашней странице Apeekflow перейдите в Настройки > Темы и нажмите +Создать тему. Введите название темы и выберите одну из предустановленных тем по умолчанию в качестве отправной точки.

Просмотрите эффект темы в режиме реального времени справа.

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

Применить тему

В редакторе приложения измените тему, нажав ⚙️ на левой боковой панели. Выберите тему в Настройках темы.

Вы также можете установить тему по умолчанию для всех своих приложений в рабочей области в разделе Настройки > Темы на домашней странице Apeekflow.

Динамическое переключение тем

Вы можете получить доступ к глобальной переменной theme и вызвать методtheme.switchTo() чтобы позволить конечным пользователям переключать темы приложений на своей стороне с помощью JavaScript. Глобальная переменная theme содержит три поля. Вы можете просмотреть их в браузере данных.

  • id и name — это строки, указывающие ID и название текущей темы. Если их значения пусты, то применяется тема по умолчанию.

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

theme.switchTo() метод переключает тему на стороне конечного пользователя и требует только идентификатор темы. Если переданное значение представляет собой пустую строку "", то применяется тема по умолчанию. Как только конечный пользователь переключит тему, она будет сохранена в локальном хранилище браузера пользователя. И эта тема переопределит тему по умолчанию и будет применяться ко всем приложениям, которые используются в том же браузере.

Демо

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

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

  1. Перетащите выбранный компонент на свой холст. Задайте значение данных следующим образом.

{{[{ id: "", name: "Default" }, ...theme.allThemes]}}

  1. Задайте метки и значения как {{item.name}} и {{item.id}} соответственно. После этого вы сможете просмотреть тему по умолчанию и все другие доступные темы в текущей рабочей области.

  2. Вставьте компонент кнопки на свой холст, чтобы переключить тему. Добавьте событие к кнопке, выберите Запустить JavaScript в качестве действия и запустите метод theme.switchTo(), который принимает значение выбранного компонента.

Пользовательский CSS

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

CSS на уровне приложения

В редакторе приложения нажмите ⚙️ на левой боковой панели, выберите Скрипты и стиль > CSS, а затем напишите CSS-код для текущего приложения.

Например, вставьте текстовый компонент text1. Затем используйте .text1 в качестве имени элемента и измените его CSS-стиль.

Рекомендуется изменить стили компонентов в меню Свойства > Стиль, поскольку DOM настроенного стиля CSS может изменяться по мере выполнения итераций системой.

Предварительная загрузка CSS

В Apeekflow администраторы workspace также могут устанавливать предварительно загруженные стили CSS для всех приложений в рабочей области. Откройте настройки и нажмите Дополнительно > Предварительно загрузить CSS.

Настоятельно рекомендуется использовать CSS-селекторы следующим образом:

Название класса
Описание

top-header

Верхняя панель навигации

root-container

Корневой контейнер приложения

Имя каждого компонента функционирует как имя класса. Например, для text1 компонент, который вы можете использовать .text1 в качестве имени класса и напишите для него CSS-код. И имена классов имеют одинаковую форму: ui-comp-{COMP_TYPE} — например, вы можете использовать .ui-comp-select, чтобы определить стиль CSS для всех выбранных компонентов. Ниже перечислены названия классов всех компонентов.

input
textArea
password
richTextEditor
numberInput
slider
rangeSlider
rating
switch
select
multiSelect
cascader
checkbox
radio
segmentedControl
file
date
dateRange
time
timeRange
button
link
dropdown
toggleButton
text
table
image
progress
progressCircle
fileViewer
divider
qrCode
form
jsonSchemaForm
container
tabbedContainer
modal
listView
navigation
iframe
custom
module
jsonExplorer
jsonEditor
tree
treeSelect
audio
video
drawer
carousel
collapsibleContainer
chart
imageEditor
scanner

Избегайте использования имен классов, которые могут изменяться в ходе итераций, таких как sc-dkiQaF bfTYCO. Apeekflow поддерживает препроцессор CSS, вы можете использовать вложенность CSS для повышения эффективности, например:

.text1 {
    span {
        color: red;
        font-weight: bold;
    }
}

Весь пользовательский CSS для приложений сохраняется в пространстве с именем #app-{APP_ID}, и CSS для модулей сохраняется в пространстве с именем #module-{MODULE_ID}. Если ваша предварительная загрузка CSS не работает должным образом, она может быть переопределена темой или стилями компонентов с более высоким приоритетом. Откройте проверку браузера, чтобы проверить.

Демо 1: Разрыв строки в заголовке таблицы

Чтобы разрешить разрыв строки в заголовке таблицы, вставьте следующий код в меню Скрипт и стиль > CSS.

.table1 {
  th div {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: unset;
  } 
}

Демо 2: Семейство пользовательских шрифтов

Чтобы использовать пользовательское семейство шрифтов, вам нужно сначала определить его, а затем применить. Вставьте следующий код в Скрипт и стиль > CSS, чтобы применить шрифт Fredoka One ко всем текстовым компонентам, используя режим Markdown в приложении.

@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/fredokaone/v13/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
}

.ui-comp-text .markdown-body {
  font-family: 'Fredoka One';
  font-size: 30px;
}

Удобное взаимодействие с пользователем

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

Скрыть компоненты пользовательского интерфейса

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

Чтобы добиться этого эффекта, установите свойство hidden для компонента textArea1 с помощью кода:

{{Number(radio1.value) === 1 ? 'false' : 'true'}}

Когда значение компонента radio1равно «1», значение скрытого свойства равно «false»; в противном случае значение равно «true». Расположение компонентов настраивается автоматически.

Конфигурация иконки

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

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

Вы можете выбрать один из предустановленных значков или написать JS-код для вставки значков, например, {{ "/icon:solid/Users" }}.

Плейсхолдер и всплывающая подсказка

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

  • Плейсхолдер: отображается в пустом поле ввода, подсказывая пользователю, что вводить.

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

Уведомления

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

Глобальные уведомления

Глобальные уведомления об определенных действиях пользователя обеспечивают своевременную обратную связь с пользователями. Apeekflow предлагает четыре типа глобальных уведомлений: Информация, Успех, Предупреждение и Ошибка.

Вы можете настроить глобальные уведомления тремя способами:

  1. Установите флажок в меню Обработчики событий > Действие > Показывать уведомления. Смотрите раздел Показывать уведомления (обработчики событий).

  2. Задавайте в JavaScript запросы со встроенными функциями.

  3. Установите на вкладке Уведомления в настройках запроса. Смотрите вкладку Уведомления.

Эффект загрузки

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

Например, эффект загрузки кнопки отправки выглядит следующим образом {{form1SubmitToHrmsEn1.isFetching}}. Нажатие на кнопку запускает запросform1SubmitToHrmsEn1 для запуска, и во время этого процесса отображается кнопка с эффектом загрузки.

Способ подтверждения

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

Дизайн формы

Формы часто используются для сбора информации. Более подробную информацию о создании простых в использовании и эффективных формуляров см. в разделе Разработка эффективной и удобной для пользователя формы.

Last updated