UI — Multogram

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

Эта страница — про внешний вид интерфейса: тему (светлую/тёмную), цвета и шаблон оформления, а также язык и переводы подписей. Всё управляется через фасад Engine.api.ui.

Тема оформления

Тема — это светлое или тёмное оформление. Отдельно от темы существует шаблон оформления (визуальный стиль) и цвета (CSS-переменные).

Узнать текущую тему

Engine.api.ui.getTheme() — возвращает текущую тему: 'light' или 'dark'.

const res = Engine.api.ui.getTheme();
console.log(res.data); // 'dark'

Установить тему

Engine.api.ui.setTheme(тема) — устанавливает тему. Значение — 'light' или 'dark'. Выбор запоминается и восстановится при следующем открытии.

Engine.api.ui.setTheme('dark');

Переключить тему

Engine.api.ui.toggleTheme() — переключает тему на противоположную. Возвращает новую тему.

const res = Engine.api.ui.toggleTheme();
console.log('Теперь тема:', res.data);

Узнать шаблон оформления

Engine.api.ui.getTemplate() — возвращает текущий шаблон оформления (например, 'classical').

Прочитать цвета оформления

Engine.api.ui.getColors() — возвращает набор цветовых переменных текущего оформления (основной цвет, фон, текст, границы и др.).

const res = Engine.api.ui.getColors();
console.log(res.data['--theme-primary']);

Переопределить цвета

Engine.api.ui.setColors(переменные) — переопределяет цвета оформления. Принимает объект, где ключ — короткий псевдоним или имя CSS-переменной, значение — цвет.

Поддерживаемые псевдонимы: primary, secondary, bg, surface, text, border.

Engine.api.ui.setColors({
  primary: '#4f46e5',
  bg: '#0f172a',
  text: '#e2e8f0'
});

Возвращает: список применённых переменных.

Интерфейс поддерживает многоязычность. Переводы хранятся в файлах локализации, а подписи с атрибутом data-i18n обновляются автоматически при смене языка. Доступные языки: английский (en), русский (ru), украинский (uk), китайский (zh), хинди (hi).

Узнать текущий язык

Engine.api.ui.getLanguage() — возвращает код текущего языка.

const res = Engine.api.ui.getLanguage();
console.log(res.data); // 'ru'

Сменить язык интерфейса

Engine.api.ui.setLanguage(язык) — меняет язык интерфейса и переводит все подписи. Выбор запоминается.

Engine.api.ui.setLanguage('en');

Список доступных языков

Engine.api.ui.getLanguages() — возвращает список доступных языков.

const res = Engine.api.ui.getLanguages();
console.log(res.data); // ['en', 'ru', 'uk', 'zh', 'hi']

Перевести строку по ключу

Engine.api.ui.t(ключ, поУмолчанию) — возвращает перевод строки по ключу на текущем языке. Если перевода нет — значение по умолчанию. В отличие от большинства методов, возвращает строку напрямую.

Глобальная функция t(ключ, поУмолчанию) — короткий синоним, доступный из любого места интерфейса.

const label = t('startWorkflow', 'Запустить');
button.textContent = label;

Получить все переводы языка

Engine.api.ui.getTranslations() — возвращает все переводы текущего языка одним объектом.

UI