ILLA components

​

ILLA забезпечує десятки попередньо побудованих компонентів для швидкого створення веб-фронт-енд інтерфейсів.

​

Список компонентів

​

Inputs

• Введення: використовується для отримання коротшого рядка, введеного користувачами

• Число входу: використовується для отримання чисел введеного користувачем.

• Редагування тексту: Використовується для відображення рядка та перемикання в режим редагування при натисканні на кнопку миші.

• Вхідна область тексту: використовується для отримання тривалого рядку, введеного користувачами

• Завантаження: Використовується для вибору локальних файлів і обробки їх в base64 дані. Натисніть тут щоб дізнатися більше про завантаження

• Чекайте вже скоро
  • Запис
  • Слайдер
  • Range slider
  • Багатий текст введення
  • JSON editor

​

Виберіть входи

• Перемикач: Перемикач, який може повертати значення true або false

• Виберіть: Виводити всі параметри у спадному списку та дозволяти користувачам обирати

• Радіо група: Показати всі параметри та дозволити користувачам вибрати один з них

• Група позначки: Показати всі параметри та дозволити користувачам обирати декілька опцій

• Каскадер: Використовується для відображення та вибору набору пов’язаних даних

• Радіо-кнопка: відображення всіх опцій в стилі кнопки. Дозволити користувачам вибирати один з них.

• Чекайте вже скоро
  • Виділення множинного
  • Дерево вибору

​

Запис з календаря

• Дата: Використовується для введення дати. Дозволити користувацький формат даних.

• Діапазон дат : Використовується для введення діапазону. Дозволити користувацький формат даних.

• Дата : Використовується для введення дати і часу. Дозволити користувацький формат даних.

• Чекайте вже скоро
  • Час

​

Презентація

• Текст: Він використовується для відображення рядків і дозволяє отримати динамічні дані від JavaSript. Підтримка синтаксису markdown. Клацніть тут щоб дізнатися більше про це.

• Зображення: Використовується для відображення зображень. Джерело зображення може бути URL-адресою або даними base64.

• Кнопка: натисніть, щоб запустити відповідну бізнес логіку

• Піктограма: Використовується для висловлення дій, стан, категоризувати дані і викликати події при натисканні

• Статистика: Використовується для відображення статистичного номера

• Оцінка: Використовується для введення або відображення рейтингів

• Прогрес панелі: Використовується для відображення прогресу

• Прогрес кола для відображення прогресу

• Часова шкала : Використовується для відображення інформації про розхід часу, зазвичай записують події в часі за допомогою спалаху, стеження за тим, що користувач робить зараз і те, що він зробив у минулому.

• Розділювач: Використовується для розділення іншого вмісту

• Вкладки: вміст по категоріям вкладок повинен представити велику кількість інформації в обмеженому просторі. Користувачі можуть легко перемикатися між панелями вкладок без переходу з однієї сторінки до іншої

• Меню: Використовується для відображення структури сторінки, керування стрибок сторінки або тригер інші події

• Контейнер: Групувати компоненти на карти, що підтримують кілька переглядів. Натисніть тут щоб дізнатися більше

• Форма: Використовуйте дані вхідних компонентів в об’єкт як значення компоненту форми, які можуть бути безпосередньо надіслані до API

• Список елементів: налаштування компонентів у списку і відображення даних

• Модуль: Відображення даних або виконання операцій через плаваючий шар, робить взаємодію користувача більш зручною

• PDF: Підтримка PDF-URL або кодованих даних base64

• Відео: Підтримка більшості відеосервісів або пряме посилання на будь-який звичайний тип відео файлу.

• Карусель: Зображення каруселі.

• Чекайте вже скоро
  • Аудіо
  • Кроки
  • Згорнутий
  • Вікно мапи

​

Дані

• Графік: візуалізувати ваші дані, підтримувати діаграму колон, діаграму рядків, графік розсіювання, діаграму pie. Натисніть тут щоб дізнатися більше про нього.

• Таблиця: загальний спосіб перегляду та взаємодії з вашими даними. Ви можете сортувати, фільтрувати, зберігати сторінки і завантажувати рядки інформації. Таблиці також підтримують вибір рядків і користувацькі колонки. Клацніть тут, щоб дізнатися більше про неї.

​

Пошук компонента

Щоб ввести список компонентів, ви можете натиснути вкладку INSERT. Введіть ім’я компонента та для пошуку компонентів через поле вводу вище.

​

Використовувати обробник подій для тригерів подій

Взяти до прикладу компонент кнопки ви можете встановити обробник подій для компоненту шляхом виразу дії або контролю інших компонентів і т. д. Коли ви натискаєте на компонент, або коли дані компонента змінюються, відповідні події можуть бути сформовані.

​

Використовувати компонент в діях

Ви можете використовувати дані компонентів в діях та інших компонентах. Візьміть в якості прикладу вхідний компонент, ви можете використовувати {{input1.value}} для отримання введеного значення в компоненті. Різні компоненти можуть мати різні формати даних. Будь ласка, перегляньте формати даних через ліву панель.